<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>邢万江</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="邢万江">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="邢万江">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="程序猿">
<meta name="twitter:card" content="summary">
  
    <link rel="alternative" href="/atom.xml" title="邢万江" type="application/atom+xml">
  
  
    <link rel="icon" href="/http://oayoilchh.bkt.clouddn.com/2016/07/27/18:05:26%20">
  
  
      
<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">

  
  
<link rel="stylesheet" href="/css/style.css">

  <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
    
    
  
  
      <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  
  <!-- 加载特效 -->
    <script src="/js/pace.js"></script>
    <link href="/css/pace/pace-theme-flash.css" rel="stylesheet" />
  <script>
      var yiliaConfig = {
          rootUrl: '/',
          fancybox: true,
          animate: true,
          isHome: true,
          isPost: false,
          isArchive: false,
          isTag: false,
          isCategory: false,
          open_in_new: false
      }
  </script>
<meta name="generator" content="Hexo 4.2.1"></head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
        <a href="/" class="profilepic">
            
            <img lazy-src="img/head.jpg" class="js-avatar">
            
        </a>
        <hgroup>
          <h1 class="header-author"><a href="/">程序猿</a></h1>
        </hgroup>
        
        
            <form>
                <input type="text" class="st-default-search-input search" id="local-search-input" placeholder="搜索一下" autocomplete="off">
            </form>
            <div id="local-search-result"></div>
        
        
            <script type="text/javascript">
                (function() {
                    'use strict';
                    function getMatchData(keyword, data) {
                        var matchData = [];
                        for(var i =0;i<data.length;i++){
                            if(data[i].title.toLowerCase().indexOf(keyword)>=0) 
                                matchData.push(data[i])
                        }
                        return matchData;
                    }
                    var $input = $('#local-search-input');
                    var $resultContent = $('#local-search-result');
                    $input.keyup(function(){
                        $.ajax({
                            url: '/search.json',
                            dataType: "json",
                            success: function( json ) {
                                var str='<ul class=\"search-result-list\">';                
                                var keyword = $input.val().trim().toLowerCase();
                                $resultContent.innerHTML = "";
                                if ($input.val().trim().length <= 0) {
                                    $resultContent.empty();
                                    $('#switch-area').show();
                                    return;
                                }
                                var results = getMatchData(keyword, json);
                                if(results.length === 0){
                                    $resultContent.empty();
                                    $('#switch-area').show();
                                    return;
                                } 
                                for(var i =0; i<results.length; i++){
                                    str += "<li><a href='"+ results[i].url +"' class='search-result-title'>"+ results[i].title +"</a></li>";
                                }
                                str += "</ul>";
                                $resultContent.empty();
                                $resultContent.append(str);
                                $('#switch-area').hide();
                            }
                        });
                    });
                })();
            </script>
        
        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                        <div class="icon-wrap icon-me hide" data-idx="3">
                            <div class="user"></div>
                            <div class="shoulder"></div>
                        </div>
                        
                    </div>
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>菜单</li>
                        <li>标签</li>
                        
                        <li>友情链接</li>
                        
                        
                        <li>关于我</li>
                        
                    </ul>
                </div>
            </div>
        
        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
                            <li><a  href="http://bestwing.me" target="_blank" rel="noopener">博客首页</a></li>
                        
                            <li><a  href="/archives">文章归档</a></li>
                        
                            <li><a  href="/CTFStudy">学习导航</a></li>
                        
                            <li><a  href="/PWNABLE">PWNABLE</a></li>
                        
                            <li><a  href="/resume">个人简历</a></li>
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fl mail"  target="_blank" href="/760996296@qq.com" title="mail">mail</a>
                            
                                <a class="fl github"  target="_blank" href="https://github.com/xingwanjiang" title="github">github</a>
                            
                                <a class="fl zhihu"  target="_blank" href="https://www.baidu.com/people/Swings" title="zhihu">zhihu</a>
                            
                                <a class="fl weibo"  target="_blank" href="https://weibo.com/u/7346457923/home?wvr=5" title="weibo">weibo</a>
                            
                                <a class="fl rss"  target="_blank" href="/atom.xml" title="rss">rss</a>
                            
                        </ul>
                    </nav>
                </section>
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        
                    </div>
                </section>
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://ring3.xyz/">Yllen</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://mxny.org/">麦香浓郁</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://whereisk0shl.top/">K0sh1</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.ycjcl.cc/">信鑫</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://bystudent.com/">ByStundet表哥</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://www.jarviswang.me/">汪神_Jarvis</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://sh3ll.me/">Chu</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://www.hackfun.org/">4ido10n</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.cnblogs.com/iamstudy">L3m0n</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://o0xmuhe.me/">muhe</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://blog.nuptzj.cn/">_画船听雨</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.virzz.com/index.html">Virink</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.sqlsec.com/">国光</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.bodkin.ren/">老锥</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.cizel.cn/">C1zel</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://1phan.cc">1phan</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://www.liuil.top/">liuil</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.cnblogs.com/Ox9A82/">Ox9A82</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://burnegg.com/">burnegg</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://jwrsec.cn/">jwr-sec</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://sudalover.cn/">苏打</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://blog.binklac.com">VeroFess</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.bendawang.site/">bendawang</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://weeklyalgo.codes/">hook</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.flier.net.cn/">Flier&#39;blog</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.mutepig.club">mutepig</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://blog.iret.xyz/list.aspx">Silver</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://simp1e.leanote.com/">Simple</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://processor.pub/">Processor</a>
                    
                    </div>
                </section>
                
                
                
                <section class="switch-part switch-part4">
                
                    <div id="js-aboutme">一只淹死在二进制海洋里的二进制狗</div>
                </section>
                
            </div>
        </div>
    </header>
</div>

    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="Me">程序猿</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                
                    <img lazy-src="/img/head.jpg" class="js-avatar">
                
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="Me">程序猿</a></h1>
            </hgroup>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="http://bestwing.me" target="_blank" rel="noopener">博客首页</a></li>
                
                    <li><a href="/archives">文章归档</a></li>
                
                    <li><a href="/CTFStudy">学习导航</a></li>
                
                    <li><a href="/PWNABLE">PWNABLE</a></li>
                
                    <li><a href="/resume">个人简历</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                <div class="social">
                    
                        <a class="mail" target="_blank" href="/760996296@qq.com" title="mail">mail</a>
                    
                        <a class="github" target="_blank" href="https://github.com/xingwanjiang" title="github">github</a>
                    
                        <a class="zhihu" target="_blank" href="https://www.baidu.com/people/Swings" title="zhihu">zhihu</a>
                    
                        <a class="weibo" target="_blank" href="https://weibo.com/u/7346457923/home?wvr=5" title="weibo">weibo</a>
                    
                        <a class="rss" target="_blank" href="/atom.xml" title="rss">rss</a>
                    
                </div>
            </nav>
        </header>                
    </div>
</nav>
      <div class="body-wrap">
  
    <article id="post-CSS3" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/05/19/CSS3/" class="article-date">
      <time datetime="2020-05-19T00:58:25.679Z" itemprop="datePublished">2020-05-19</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/05/19/CSS3/">CSS3</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h1 id="渐变"><a href="#渐变" class="headerlink" title="渐变"></a>渐变</h1><h2 id="线性渐变"><a href="#线性渐变" class="headerlink" title="线性渐变"></a>线性渐变</h2><blockquote>
<p>linear-gradient指沿着某条直线朝一个方向产生的渐变效果。</p>
</blockquote>
<p>线性渐变的核心：</p>
<ul>
<li>渐变方向</li>
<li>颜色</li>
<li>渐变范围</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效 */</span></span><br><span class="line"><span class="comment">/* 渐变的核心：渐变方向，渐变颜色, 渐变范围 */</span></span><br><span class="line"><span class="comment">/* background-image: linear-gradient( 方向, 颜色 范围, 颜色 范围, 颜色 范围 ); */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 最简单的渐变 */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(<span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"><span class="comment">/* 设定渐变的方向  */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(<span class="selector-tag">to</span> <span class="selector-tag">right</span>, <span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"><span class="comment">/* 也可以设定渐变的角度  */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(45<span class="selector-tag">deg</span>, <span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"><span class="comment">/* 设定渐变的范围  */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(<span class="selector-tag">to</span> <span class="selector-tag">right</span>, <span class="selector-tag">red</span> 20%, <span class="selector-tag">green</span> 80%)</span><br><span class="line"><span class="comment">/* 每一个区间表示渐变颜色的范围  */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(<span class="selector-tag">to</span> <span class="selector-tag">right</span>, <span class="selector-tag">red</span> 20%, <span class="selector-tag">green</span> 20%)</span><br></pre></td></tr></table></figure>

<p>【演示：渐变-线性渐变.html】</p>
<p>【演示：导航按钮.html】</p>
<p>【案例：渐变-案例-发廊效果.html】</p>
<h2 id="径向渐变"><a href="#径向渐变" class="headerlink" title="径向渐变"></a>径向渐变</h2><blockquote>
<p>radial-gradient指从一个中心点开始沿着四周产生渐变效果</p>
</blockquote>
<p>径向渐变的核心：</p>
<ul>
<li>圆的大小</li>
<li>圆心的位置</li>
<li>颜色</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*1. 最简单的渐变*/</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">radial-gradient</span>(<span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*2. 指定圆的半径和圆心*/</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">radial-gradient</span>(200<span class="selector-tag">px</span> <span class="selector-tag">at</span> <span class="selector-tag">center</span>, <span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*3. 指定椭圆*/</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">radial-gradient</span>(200<span class="selector-tag">px</span> 80<span class="selector-tag">px</span> <span class="selector-tag">at</span> <span class="selector-tag">center</span>, <span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*4. 指定范围*/</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">radial-gradient</span>(200<span class="selector-tag">px</span> <span class="selector-tag">at</span> <span class="selector-tag">center</span>, <span class="selector-tag">green</span> 50%, <span class="selector-tag">red</span> 50%);</span><br></pre></td></tr></table></figure>

<p>【演示：径向渐变-语法.html】</p>
<p>【案例：径向渐变-立体小球.html】</p>
<h1 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h1><h2 id="过渡的属性"><a href="#过渡的属性" class="headerlink" title="过渡的属性"></a>过渡的属性</h2><ol>
<li>如果两个状态发生改变，没有过渡，效果是瞬间变化的</li>
<li>如果加上了过渡，那么这个过程就会有动画的效果。</li>
<li>整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态与结束状态即可。</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*transition-property：设置过渡属性</span></span><br><span class="line"><span class="comment">/*也可以是width,height*/</span></span><br><span class="line"><span class="selector-tag">transition-property</span><span class="selector-pseudo">:all</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*transition-duration:设置过渡时间*/</span></span><br><span class="line"><span class="selector-tag">transition-duration</span><span class="selector-pseudo">:1s</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*transition-delay：设置过渡延时*/</span></span><br><span class="line"><span class="selector-tag">transition-delay</span><span class="selector-pseudo">:2s</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*transition-timing-function:设置过渡的速度*/</span></span><br><span class="line"><span class="comment">/*linear，ease，ease-in，ease-out，ease-in-out， steps(10)*/</span></span><br><span class="line"><span class="selector-tag">transition-timing-function</span><span class="selector-pseudo">:linear</span>;</span><br></pre></td></tr></table></figure>

<p>【演示：过渡基本语法】</p>
<h2 id="属性合写"><a href="#属性合写" class="headerlink" title="属性合写"></a>属性合写</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 属性 时间 延时 速度 */</span></span><br><span class="line"><span class="selector-tag">transition</span>: <span class="selector-tag">width</span> 1<span class="selector-tag">s</span> 3<span class="selector-tag">s</span> <span class="selector-tag">linear</span>;</span><br></pre></td></tr></table></figure>

<p>过渡的注意点：</p>
<ul>
<li>过渡必须要有两个状态的变化。</li>
<li>过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。</li>
</ul>
<p>【案例：手风琴效果】</p>
<h1 id="2D转换"><a href="#2D转换" class="headerlink" title="2D转换"></a>2D转换</h1><blockquote>
<p>transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。</p>
<p>transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作</p>
</blockquote>
<h2 id="scale缩放"><a href="#scale缩放" class="headerlink" title="scale缩放"></a>scale缩放</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">transform</span>: <span class="selector-tag">scaleX</span>(0<span class="selector-class">.5</span>);<span class="comment">/*让宽度变化*/</span></span><br><span class="line"><span class="selector-tag">transform</span>: <span class="selector-tag">scaleY</span>(0<span class="selector-class">.5</span>);<span class="comment">/*让高度变化，注意不能写多个transform，不然会覆盖。*/</span></span><br><span class="line"><span class="selector-tag">transform</span>: <span class="selector-tag">scale</span>(0<span class="selector-class">.5</span>);<span class="comment">/*让宽度和高度同时变化*/</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ul>
<li>scale接收的值是倍数，因此没有单位</li>
<li>scale可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。</li>
<li>可以通过transform-origin设定旋转原点</li>
</ul>
<h2 id="translate平移"><a href="#translate平移" class="headerlink" title="translate平移"></a>translate平移</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">transform: translateX(<span class="number">100</span>px);</span><br><span class="line">transform: translateY(<span class="number">100</span>px);</span><br><span class="line">transform: translate(<span class="number">100</span>px, <span class="number">100</span>px);</span><br><span class="line">transform: translate(<span class="number">50</span>%, <span class="number">50</span>%);</span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ul>
<li>translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。</li>
<li>translate移动的元素并不会影响其他盒子，类似于相对定位。</li>
</ul>
<h2 id="rotate旋转"><a href="#rotate旋转" class="headerlink" title="rotate旋转"></a>rotate旋转</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">transform: rotate(<span class="number">360</span>deg);<span class="comment">//旋转360度</span></span><br><span class="line">transform: rotate(<span class="number">-360</span>deg);<span class="comment">//逆时针旋转360度</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ul>
<li>单位是deg，角度，不是px</li>
<li>正值顺时针转，负值逆时针转</li>
<li>可以通过transition-origin设定旋转原点</li>
</ul>
<h2 id="skew斜切-变形"><a href="#skew斜切-变形" class="headerlink" title="skew斜切(变形)"></a>skew斜切(变形)</h2><blockquote>
<p>skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*在水平方向倾斜30deg*/</span></span><br><span class="line">transform: skewX(<span class="number">30</span>deg);</span><br><span class="line"><span class="comment">/*在垂直方向倾斜30deg*/</span></span><br><span class="line">transform: skewY(<span class="number">30</span>deg);</span><br></pre></td></tr></table></figure>

<p>【案例：扫光效果.html】</p>
<h2 id="transform-origin转换原点"><a href="#transform-origin转换原点" class="headerlink" title="transform-origin转换原点"></a>transform-origin转换原点</h2><blockquote>
<p>通过transform-origin可以设置转换的中心原点。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">transform-origin: center center;</span><br><span class="line">transform-origin: <span class="number">40</span>px <span class="number">40</span>px;</span><br></pre></td></tr></table></figure>

<h2 id="转换合写问题"><a href="#转换合写问题" class="headerlink" title="转换合写问题"></a>转换合写问题</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">transform:translateX(<span class="number">800</span>px) scale(<span class="number">1.5</span>) rotate(<span class="number">360</span>deg) ;</span><br><span class="line"><span class="comment">//1. transform属性只能写一个，如果写了多个会覆盖</span></span><br><span class="line"><span class="comment">//2. transform属性可以连写，但是顺序对效果影响的，因为它会在第一个效果的基础上执行第二个效果，然后执行第三个效果（通常会把rotate放后面）</span></span><br><span class="line"><span class="comment">//3. 如果对transform进行过度效果的时候，初始状态和结束状态一一对应</span></span><br></pre></td></tr></table></figure>

<p>【案例：盾牌打散与合并效果.html】</p>
<h1 id="3D转换"><a href="#3D转换" class="headerlink" title="3D转换"></a>3D转换</h1><blockquote>
<p>transform:不仅可以2D转换，还可以进行3D转换。</p>
</blockquote>
<p>思考：2D与3D的区别？</p>
<h2 id="坐标轴"><a href="#坐标轴" class="headerlink" title="坐标轴"></a>坐标轴</h2><blockquote>
<p>用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。<strong>注意+Y是向下的。</strong></p>
</blockquote>
<p><img src="images/zbz.png" alt="img"></p>
<h2 id="perspective透视"><a href="#perspective透视" class="headerlink" title="perspective透视"></a>perspective透视</h2><blockquote>
<p>电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。</p>
<p>说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，让我们能看出来3d的效果。</p>
<p>注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">perspective：<span class="number">500</span>px;</span><br></pre></td></tr></table></figure>

<p>关于近大远小</p>
<p><img src="images/per1.jpg" alt="img"></p>
<p><img src="images/per2.jpg" alt="img"></p>
<p>对于我们眼睛来说，离我们越近的房子，我们会感觉到这个房子越大，离我们越远的房子，就会感觉越小，其实房子的大小都是一样的，只是在视觉上的一种不同。</p>
<h2 id="rotate旋转-1"><a href="#rotate旋转-1" class="headerlink" title="rotate旋转"></a>rotate旋转</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">transform: rotate(<span class="number">45</span>deg);<span class="comment">// 让元素在平面2D中旋转</span></span><br><span class="line">transform: rotateX(<span class="number">45</span>deg);<span class="comment">// 让元素沿着X轴转45度</span></span><br><span class="line">transform: rotateY(<span class="number">45</span>deg);<span class="comment">// 让元素沿着Y轴转45度</span></span><br><span class="line">transform: rotateZ(<span class="number">45</span>deg);<span class="comment">// 让元素沿着Z轴转45度</span></span><br></pre></td></tr></table></figure>

<p>【01-3D转换-旋转.html】</p>
<p>问题：看不出来怎么转的，为什么现实生活中能够看出来？</p>
<h2 id="translate平移-1"><a href="#translate平移-1" class="headerlink" title="translate平移"></a>translate平移</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*沿着X轴的正方向移动45px*/</span></span><br><span class="line">transform: translateX(<span class="number">45</span>px);</span><br><span class="line"><span class="comment">/*沿着Y轴的正方向移动45px*/</span></span><br><span class="line">transform: translateY(<span class="number">45</span>px);</span><br><span class="line"><span class="comment">/*沿着Y轴的正方向移动45px*/</span></span><br><span class="line">transform: translateZ(<span class="number">45</span>px);</span><br></pre></td></tr></table></figure>

<p>【02-3D转换-平移.html】</p>
<p>【立方体.html】</p>
<h2 id="transform-style"><a href="#transform-style" class="headerlink" title="transform-style"></a>transform-style</h2><blockquote>
<p>transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">flat:默认值，<span class="number">2</span>d显示</span><br><span class="line">preserve<span class="number">-3</span>d: <span class="number">3</span>d显示</span><br></pre></td></tr></table></figure>

<p>transform-style与perspective的区别</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，*/</span></span><br><span class="line"><span class="comment">/*preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//一个3d元素可以没有perspective，但是不能没有transform-style</span></span><br></pre></td></tr></table></figure>

<p>【3d导航案例.html】</p>
<p>【切割轮播图案例】</p>
<p>【美女相册案例】</p>

      
      
    </div>
    
    <div class="article-info article-info-index">
      
      

      
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-VUE相关" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/01/05/VUE%E7%9B%B8%E5%85%B3/" class="article-date">
      <time datetime="2020-01-04T16:00:00.000Z" itemprop="datePublished">2020-01-05</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/01/05/VUE%E7%9B%B8%E5%85%B3/">VUE相关</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h1 id="1-Vue介绍"><a href="#1-Vue介绍" class="headerlink" title="1 Vue介绍"></a>1 Vue介绍</h1><h2 id="1-1-为什么要学习流行框架"><a href="#1-1-为什么要学习流行框架" class="headerlink" title="1.1 为什么要学习流行框架"></a>1.1 为什么要学习流行框架</h2><ul>
<li>企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；</li>
</ul>
<ul>
<li>企业中，使用框架，能够提高开发的效率；</li>
</ul>
<ul>
<li><p>提高开发效率的发展历程：</p>
<p>原生JS -&gt; Jquery之类的类库 -&gt; 前端模板引擎 -&gt; Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率）</p>
</li>
</ul>
<h2 id="1-2-框架和库的区别"><a href="#1-2-框架和库的区别" class="headerlink" title="1.2 框架和库的区别"></a>1.2 框架和库的区别</h2><ul>
<li><p>框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。</p>
<p>node 中的 express；</p>
</li>
<li><p>库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。</p>
<p>1.从Jquery 切换到 Zepto</p>
<p>2.从 EJS 切换到 art-template</p>
</li>
</ul>
<h2 id="1-3-什么是Vue-js"><a href="#1-3-什么是Vue-js" class="headerlink" title="1.3 什么是Vue.js"></a>1.3 什么是Vue.js</h2><p><a href="https://cn.vuejs.org/v2/api/" target="_blank" rel="noopener">https://cn.vuejs.org/v2/api/</a></p>
<ul>
<li><p>Vue.js是是一套用于构建用户界面的<strong>渐进式框架</strong>，是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">渐进式代表的含义是：没有多做职责之外的事。vue.js只提供了 vue-cli 生态中最核心的 组件系统 和 双向数据绑定。像vuex、vue-router都属于围绕 vue.js开发的库，可以集成也可以不集成。</span><br></pre></td></tr></table></figure>

<p><img src="E:/%E5%89%8D%E7%AB%AF%E7%BA%BF%E4%B8%8A%E6%8E%88%E8%AF%BE/vue.js/3.4/readme/assets/1547020742242.png" alt="1547020742242"></p>
</li>
<li><p>Vue.js 是前端的<strong>主流框架之一</strong>，和Angular.js、React.js 一起，并成为前端三大主流框架！</p>
</li>
<li><p>Vue.js 是一套构建用户界面的框架，<strong>只关注视图层</strong>，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）</p>
</li>
</ul>
<h2 id="1-4-Vue的核心思想"><a href="#1-4-Vue的核心思想" class="headerlink" title="1.4. Vue的核心思想"></a>1.4. Vue的核心思想</h2><blockquote>
<ul>
<li>数据驱动，没有dom操作，页面显示由数据驱动</li>
<li>组件化，一个页面可以划分成很多组件</li>
<li>状态管理 ，vuex，可用于在多个页面之间进行数据共享</li>
</ul>
</blockquote>
<h2 id="1-5-MVC和MVVM"><a href="#1-5-MVC和MVVM" class="headerlink" title="1.5 MVC和MVVM"></a>1.5 MVC和MVVM</h2><h3 id="a-MVC"><a href="#a-MVC" class="headerlink" title="a) MVC"></a>a) MVC</h3><blockquote>
<p>M - Model ：数据保存</p>
<p>V - View : 用户界面</p>
<p>C - Controller ： 业务逻辑</p>
</blockquote>
<p>用户操作–&gt; View (负责接受用户的输入操作)–&gt;Controller（业务逻辑处理）–&gt;Model（数据持久化）–&gt;View（将结果通过View反馈给用户）</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E7%BA%BF%E4%B8%8A%E6%8E%88%E8%AF%BE/vue.js/3.4/readme/assets/1544595003941.png" alt="1544595003941"></p>
<p>MVC有两个很明显的问题：</p>
<blockquote>
<p>1.m层和v层直接打交道，导致这两层耦合度高</p>
<p>2.因为所有逻辑都写在c层，导致c层特别臃肿</p>
</blockquote>
<h3 id="b-MVVM"><a href="#b-MVVM" class="headerlink" title="b) MVVM"></a>b) MVVM</h3><p>前端应用的复杂程度已不同往日，暴露出了三个痛点问题：</p>
<blockquote>
<p>1.开发者在代码中大量调用相同的DOM API, 处理繁琐，操作冗余，使得代码难以维护。</p>
<p>2.大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。</p>
<p>3.当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致Model发生变化，开发者同样需要将变化的数据同步到Model中， 这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。</p>
</blockquote>
<p>早期 jQuery 的出现就是为了前端能更简洁的操作DOM 而设计的，但它只解决了第一个问题，另外两个问题始终伴随着前端一直存在。</p>
<p>MVVM 的出现，完美解决了以上三个问题，MVVM 包含的三部分：</p>
<blockquote>
<p>1.Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；</p>
<p>2.View 代表UI 组件，它负责将数据模型转化成UI 展现出来</p>
<p>3.ViewModel 是一个同步View 和 Model的对象。View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互。ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。</p>
</blockquote>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E7%BA%BF%E4%B8%8A%E6%8E%88%E8%AF%BE/vue.js/3.4/readme/assets/1546916497187.png" alt="1546916497187"></p>
<p>MVVM 模式采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。angular 和vue都采用这种模式。</p>
<h1 id="2-Vue基本语法"><a href="#2-Vue基本语法" class="headerlink" title="2 Vue基本语法"></a>2 Vue基本语法</h1><h2 id="2-1-基本使用"><a href="#2-1-基本使用" class="headerlink" title="2.1 基本使用"></a>2.1 基本使用</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1. 导入Vue的包 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- id="app" : app指的是将来 new 的Vue实例，会控制这个元素中的所有内容 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- Vue 实例所控制的这个元素区域，就是我们的 View  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 2. 创建一个Vue的实例，就是我们 MVVM中的 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//  当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">	  <span class="comment">// 表示当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域</span></span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,  </span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 这里的 data 就是 MVVM中的 Model，专门用来保存每个页面的数据的</span></span></span><br><span class="line">      data: &#123; </span><br><span class="line"><span class="actionscript">		<span class="comment">// data 属性中，存放的是el中要用到的数据</span></span></span><br><span class="line"><span class="actionscript">        msg: <span class="string">'欢迎学习Vue'</span> <span class="comment">// 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】</span></span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//mustache 插值表达式的特点：必须是一句话，必须有返回值</span></span><br><span class="line">&#123;&#123;number+<span class="number">1</span>&#125;&#125;</span><br><span class="line">&#123;&#123;ok?<span class="string">"YES"</span>:<span class="string">"NO"</span>&#125;&#125;</span><br><span class="line">&#123;&#123;message.split(<span class="string">""</span>).reverse().join(<span class="string">"-"</span>)&#125;&#125;</span><br></pre></td></tr></table></figure>

<h2 id="2-2-常用指令"><a href="#2-2-常用指令" class="headerlink" title="2.2 常用指令"></a>2.2 常用指令</h2><ul>
<li>v-cloak</li>
<li>v-text</li>
<li>v-html</li>
<li>v-bind</li>
<li>v-on</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="selector-attr">[v-cloak]</span> &#123;</span></span><br><span class="line">      display: none;</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题  vue-2.4.0.js的加载需要时间，在vue-2.4.0.js没有成功加载之前，页面会显示&#123; &#123;msg&#125;&#125;文本信息 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-cloak</span>&gt;</span>++++++++ &#123;&#123; msg &#125;&#125; ----------<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h4</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>&gt;</span>==================<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 默认 v-text 是没有闪烁问题的 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123;msg2&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-text</span>=<span class="string">"msg2"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	 <span class="comment">&lt;!-- v-html会覆盖元素中原本的内容，只不过会将msg2当做html文本进行解析 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">"msg2"</span>&gt;</span>1212112<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- v-bind: 是Vue中提供的用于绑定属性的指令，v-bind 中，可以写合法的JS表达式 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮1"</span> <span class="attr">v-bind:title</span>=<span class="string">"mytitle + '123'"</span>&gt;</span> </span><br><span class="line">    <span class="comment">&lt;!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 --&gt;</span></span><br><span class="line">	 <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮2"</span> <span class="attr">:title</span>=<span class="string">"mytitle + '3455'"</span>&gt;</span> </span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- Vue 中提供了 v-on: 事件绑定机制</span></span><br><span class="line"><span class="comment">          下面代码错误：因为vue会将alert理解为一个变量，而在Vue中我们并没有定义alert变量，所以找不到	--&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;input type="button" value="按钮3" :title="mytitle + '888'" v-on:click="alert('hello')"&gt;--&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="comment">&lt;!--v-on:click可以简写成@click--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮4"</span> @<span class="attr">click</span>=<span class="string">"show"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        msg: <span class="string">'123'</span>,</span></span><br><span class="line"><span class="handlebars"><span class="xml">        msg2: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>哈哈，我是一个大大的H1， 我大，我骄傲<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>',</span></span></span><br><span class="line"><span class="actionscript">        mytitle: <span class="string">'这是一个自己定义的title'</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123; </span><br><span class="line"><span class="actionscript">        <span class="comment">// 这个 methods属性中定义了当前Vue实例所有可用的方法</span></span></span><br><span class="line"><span class="actionscript">        show: <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">          alert(<span class="string">'Hello'</span>)</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    /*</span><br><span class="line"><span class="actionscript">	<span class="comment">//在vue中不推荐我们再去使用dom操作的方法</span></span></span><br><span class="line"><span class="javascript">	<span class="built_in">document</span>.getElementById(<span class="string">'btn'</span>).onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="actionscript">      alert(<span class="string">'Hello'</span>)</span></span><br><span class="line">    &#125; */</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-3-跑马灯效果"><a href="#2-3-跑马灯效果" class="headerlink" title="2.3 跑马灯效果"></a>2.3 跑马灯效果</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1. 导入Vue包 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 2. 创建一个要控制的区域 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"浪起来"</span> @<span class="attr">click</span>=<span class="string">"lang"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"低调"</span> @<span class="attr">click</span>=<span class="string">"stop"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 注意：在VM实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问，这里的this，就表示我们new出来的VM 实例对象</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        msg: <span class="string">'猥琐发育，别浪~~！'</span>,</span></span><br><span class="line"><span class="actionscript">        intervalId: <span class="literal">null</span> <span class="comment">// 在data上定义定时器Id</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        lang() &#123;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">          <span class="keyword">if</span> (<span class="keyword">this</span>.intervalId != <span class="literal">null</span>) <span class="keyword">return</span>;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">          <span class="keyword">this</span>.intervalId = setInterval(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> start = <span class="keyword">this</span>.msg.substring(<span class="number">0</span>, <span class="number">1</span>)</span></span><br><span class="line"><span class="actionscript">            <span class="comment">// 获取到后面的所有字符</span></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> end = <span class="keyword">this</span>.msg.substring(<span class="number">1</span>)</span></span><br><span class="line"><span class="actionscript">            <span class="comment">// 重新拼接得到新的字符串，并赋值给 this.msg</span></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">this</span>.msg = end + start</span></span><br><span class="line">          &#125;, 400)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">          <span class="comment">// 注意： VM实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据从data上同步到页面中去；</span></span></span><br><span class="line"><span class="actionscript">		  <span class="comment">//【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】</span></span></span><br><span class="line">        &#125;,</span><br><span class="line">        stop() &#123; </span><br><span class="line"><span class="actionscript">		  <span class="comment">//停止定时器</span></span></span><br><span class="line"><span class="actionscript">          clearInterval(<span class="keyword">this</span>.intervalId)</span></span><br><span class="line"><span class="actionscript">          <span class="comment">//每当清除了定时器之后，需要重新把 intervalId 置为 null</span></span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.intervalId = <span class="literal">null</span>;</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-4-事件修饰符"><a href="#2-4-事件修饰符" class="headerlink" title="2.4 事件修饰符"></a>2.4 事件修饰符</h2><ul>
<li>.stop       阻止冒泡</li>
<li>.prevent    阻止默认事件</li>
<li>.capture    添加事件侦听器时使用事件捕获模式</li>
<li>.self       只当事件在该元素本身（比如不是子元素）触发时触发回调</li>
<li>.once       事件只触发一次</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.inner</span> &#123;</span></span><br><span class="line">      height: 150px;</span><br><span class="line">      background-color: darkcyan;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.outer</span> &#123;</span></span><br><span class="line">      padding: 40px;</span><br><span class="line">      background-color: red;</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用  .stop  阻止冒泡 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner"</span> @<span class="attr">click</span>=<span class="string">"div1Handler"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"阻止冒泡"</span> @<span class="attr">click.stop</span>=<span class="string">"btnHandler"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用 .prevent 阻止默认行为 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.baidu.com"</span> @<span class="attr">click.prevent</span>=<span class="string">"linkClick"</span>&gt;</span>阻止默认行为<span class="tag">&lt;/<span class="name">a</span>&gt;</span> </span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用  .capture 实现捕获触发事件的机制 。打印顺序从外向里 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner"</span> @<span class="attr">click.capture</span>=<span class="string">"div1Handler"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"捕获事件"</span> @<span class="attr">click</span>=<span class="string">"btnHandler"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span> </span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner"</span> @<span class="attr">click</span>=<span class="string">"div1Handler.self"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"self"</span> @<span class="attr">click</span>=<span class="string">"btnHandler"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用 .once 只触发一次事件处理函数 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">href</span>=<span class="string">"http://www.baidu.com"</span> @<span class="attr">click.once</span>=<span class="string">"spanClick"</span>&gt;</span>只能触发一次<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 演示： .stop 和 .self 的区别 --&gt;</span></span><br><span class="line">	<span class="comment">&lt;!--.stop阻止所有的冒泡--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"outer"</span> @<span class="attr">click</span>=<span class="string">"div2Handler"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner"</span> @<span class="attr">click</span>=<span class="string">"div1Handler"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"stop"</span> @<span class="attr">click.stop</span>=<span class="string">"btnHandler"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- .self 只有点击当前元素才会触发点击事件。如果子元素的事件冒泡到自己身上，不会执行该事件 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"outer"</span> @<span class="attr">click</span>=<span class="string">"div2Handler"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner"</span> @<span class="attr">click.self</span>=<span class="string">"div1Handler"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"self"</span> @<span class="attr">click</span>=<span class="string">"btnHandler"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span> </span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        div1Handler() &#123;</span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">'这是触发了 inner div 的点击事件'</span>)</span></span><br><span class="line">        &#125;,</span><br><span class="line">        btnHandler() &#123;</span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">'这是触发了 btn 按钮 的点击事件'</span>)</span></span><br><span class="line">        &#125;,</span><br><span class="line">        linkClick() &#123;</span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">'触发了连接的点击事件'</span>)</span></span><br><span class="line">        &#125;,</span><br><span class="line">        div2Handler() &#123;</span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">'这是触发了 outer div 的点击事件'</span>)</span></span><br><span class="line">        &#125;,</span><br><span class="line">        spanClick()&#123;</span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">'spanClick'</span>)</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-5-v-model和双向绑定"><a href="#2-5-v-model和双向绑定" class="headerlink" title="2.5 v-model和双向绑定"></a>2.5 v-model和双向绑定</h2><p>只有v-model指令实现了双向绑定， v-model 只能运用在表单元素中。如： input(radio, text, address, email….)   select    checkbox   textarea</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"app"</span> <span class="attr">action</span>=<span class="string">"#"</span>&gt;</span></span><br><span class="line">		    <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">input</span>  <span class="attr">v-model</span>=<span class="string">"email"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		    <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"modify"</span>&gt;</span>点我修改数据源<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">		    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"show"</span>&gt;</span>改完表单再点我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">	<span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">	  el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        email: <span class="string">'zhangsan@qq.com'</span>,</span></span><br><span class="line"><span class="actionscript">        name: <span class="string">'zhangsan'</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods:&#123;</span><br><span class="line"><span class="actionscript">      	modify:<span class="function"><span class="keyword">function</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">      		<span class="keyword">this</span>.email = <span class="string">'lisi@.qq.com'</span>;</span></span><br><span class="line">      	&#125;,</span><br><span class="line"><span class="actionscript">      	show:<span class="function"><span class="keyword">function</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">      		alert(<span class="keyword">this</span>.email);</span></span><br><span class="line">      	&#125;</span><br><span class="line">      &#125;</span><br><span class="line">	&#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-6-双向绑定-计算器案例"><a href="#2-6-双向绑定-计算器案例" class="headerlink" title="2.6 双向绑定-计算器案例"></a>2.6 双向绑定-计算器案例</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"n1"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">select</span> <span class="attr">v-model</span>=<span class="string">"opt"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"+"</span>&gt;</span>+<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"-"</span>&gt;</span>-<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"*"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"/"</span>&gt;</span>/<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"n2"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"="</span> @<span class="attr">click</span>=<span class="string">"calc"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"result"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line">        n1: 0,</span><br><span class="line">        n2: 0,</span><br><span class="line">        result: 0,</span><br><span class="line"><span class="actionscript">        opt: <span class="string">'+'</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line"><span class="actionscript">        calc() &#123; <span class="comment">// 计算器算数的方法  </span></span></span><br><span class="line"><span class="actionscript">          <span class="comment">// 逻辑：</span></span></span><br><span class="line"><span class="actionscript">          <span class="keyword">switch</span> (<span class="keyword">this</span>.opt) &#123;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">case</span> <span class="string">'+'</span>:</span></span><br><span class="line"><span class="javascript">              <span class="keyword">this</span>.result = <span class="built_in">parseInt</span>(<span class="keyword">this</span>.n1) + <span class="built_in">parseInt</span>(<span class="keyword">this</span>.n2)</span></span><br><span class="line"><span class="actionscript">              <span class="keyword">break</span>;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">case</span> <span class="string">'-'</span>:</span></span><br><span class="line"><span class="javascript">              <span class="keyword">this</span>.result = <span class="built_in">parseInt</span>(<span class="keyword">this</span>.n1) - <span class="built_in">parseInt</span>(<span class="keyword">this</span>.n2)</span></span><br><span class="line"><span class="actionscript">              <span class="keyword">break</span>;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">case</span> <span class="string">'*'</span>:</span></span><br><span class="line"><span class="javascript">              <span class="keyword">this</span>.result = <span class="built_in">parseInt</span>(<span class="keyword">this</span>.n1) * <span class="built_in">parseInt</span>(<span class="keyword">this</span>.n2)</span></span><br><span class="line"><span class="actionscript">              <span class="keyword">break</span>;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">case</span> <span class="string">'/'</span>:</span></span><br><span class="line"><span class="javascript">              <span class="keyword">this</span>.result = <span class="built_in">parseInt</span>(<span class="keyword">this</span>.n1) / <span class="built_in">parseInt</span>(<span class="keyword">this</span>.n2)</span></span><br><span class="line"><span class="actionscript">              <span class="keyword">break</span>;</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-7-双向绑定的原理"><a href="#2-7-双向绑定的原理" class="headerlink" title="2.7 双向绑定的原理"></a>2.7 双向绑定的原理</h2><h3 id="a-页面–-gt-数据"><a href="#a-页面–-gt-数据" class="headerlink" title="a) 页面–&gt;数据"></a>a) 页面–&gt;数据</h3><p>view更新data只需要添加DOM事件监听即可，比如input标签监听 ‘input’ 事件就可以实现</p>
<h3 id="b-数据–-gt-页面"><a href="#b-数据–-gt-页面" class="headerlink" title="b) 数据–&gt;页面"></a>b) 数据–&gt;页面</h3><p>是通过数据劫持 + 发布者-订阅者模式的方式来实现的</p>
<h4 id="1-数据劫持"><a href="#1-数据劫持" class="headerlink" title="(1).数据劫持"></a>(1).数据劫持</h4><p>vue是通过Object.defineProperty()来实现数据劫持的。(vue3.0已换成proxy来实现数据劫持)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> book = &#123;&#125;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(book, <span class="string">'name'</span>, &#123;</span><br><span class="line">    <span class="keyword">set</span>: function (value) &#123;</span><br><span class="line">        name = value;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'你取了一个书名叫做'</span> + value);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="keyword">get</span>: function () &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'《'</span> + name + <span class="string">'》'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">book.name = <span class="string">'vue权威指南'</span>;  <span class="comment">// 你取了一个书名叫做vue权威指南</span></span><br><span class="line">book.name = <span class="string">'vue权威指南2'</span>;  <span class="comment">// 你取了一个书名叫做vue权威指南</span></span><br><span class="line"><span class="built_in">console</span>.log(book.name);  <span class="comment">// 《vue权威指南》</span></span><br></pre></td></tr></table></figure>

<h4 id="2-发布者订阅模式"><a href="#2-发布者订阅模式" class="headerlink" title="(2).发布者订阅模式"></a>(2).发布者订阅模式</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.消息订阅器，内部维护了所有订阅者的列表</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Dep</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.subs = [];</span><br><span class="line">&#125;</span><br><span class="line">Dep.prototype = &#123;</span><br><span class="line">    addSub: <span class="function"><span class="keyword">function</span>(<span class="params">sub</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.subs.push(sub);</span><br><span class="line">    &#125;,</span><br><span class="line">    notify: <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.subs.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">sub</span>) </span>&#123;</span><br><span class="line">            sub.update(value);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> dep = <span class="keyword">new</span> Dep();</span><br><span class="line"></span><br><span class="line"><span class="comment">//2.订阅者</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Watcher</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line">Watcher.prototype = &#123;</span><br><span class="line">    update: <span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"数据源已经变动，新的数据是"</span>+value)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> w1 = <span class="keyword">new</span> Watcher();</span><br><span class="line"><span class="keyword">var</span> w2 = <span class="keyword">new</span> Watcher();</span><br><span class="line">dep.addSub(w1);</span><br><span class="line">dep.addSub(w2);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//3.数据源，通过defineProperty监听数据源的变化</span></span><br><span class="line"><span class="keyword">var</span> book = &#123;&#125;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(book, <span class="string">'name'</span>, &#123;</span><br><span class="line">    <span class="keyword">set</span>: function (value) &#123;</span><br><span class="line">        name = value;</span><br><span class="line">        <span class="comment">//一旦数据源发生变化了，通知所有的订阅者更新数据</span></span><br><span class="line">        dep.notify(value);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="keyword">get</span>: function () &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'《'</span> + name + <span class="string">'》'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">book.name = <span class="string">'vue权威指南'</span>;  <span class="comment">// 你取了一个书名叫做vue权威指南</span></span><br><span class="line">book.name = <span class="string">'vue权威指南2'</span>;  <span class="comment">// 你取了一个书名叫做vue权威指南</span></span><br><span class="line"><span class="built_in">console</span>.log(book.name);  <span class="comment">// 《vue权威指南》</span></span><br></pre></td></tr></table></figure>

<h4 id="3-数据绑定的实现流程"><a href="#3-数据绑定的实现流程" class="headerlink" title="(3).数据绑定的实现流程"></a>(3).数据绑定的实现流程</h4><p>首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。</p>
<p>因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。</p>
<p>接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。</p>
<p>因此接下去我们执行以下3个步骤，实现数据的双向绑定：</p>
<blockquote>
<p>1.监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知所有订阅者。</p>
<p>2.订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。</p>
<p>3.解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅者</p>
</blockquote>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E7%BA%BF%E4%B8%8A%E6%8E%88%E8%AF%BE/vue.js/3.4/readme/assets/1547815009579.png" alt="1547815009579"></p>
<p>参考链接：<a href="https://www.cnblogs.com/libin-1/p/6893712.html" target="_blank" rel="noopener">https://www.cnblogs.com/libin-1/p/6893712.html</a></p>
<h2 id="2-8-vue样式操作"><a href="#2-8-vue样式操作" class="headerlink" title="2.8 vue样式操作"></a>2.8 vue样式操作</h2><h3 id="a-class操作"><a href="#a-class操作" class="headerlink" title="a)  class操作"></a>a)  class操作</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.red</span> &#123;</span></span><br><span class="line">      color: red;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.thin</span> &#123;</span></span><br><span class="line">      font-weight: 200;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.italic</span> &#123;</span></span><br><span class="line">      font-style: italic;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.active</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">letter-spacing</span>: 1<span class="selector-class">.5em</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"red thin"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span> </span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 第一种使用方式，直接传递一个数组，注意：这里的class需要使用  v-bind 做数据绑定 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"['thin', 'italic']"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 在数组中使用三元表达式 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"['thin', 'italic', flag?'active':'']"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span> </span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 在数组中使用对象来代替三元表达式，提高代码的可读性 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"['thin', 'italic', &#123;'active':flag&#125; ]"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span> </span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 在为class使用v-bind绑定对象的时候，对象的属性是类名，属性的值是一个标识符 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"classObj"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        flag: <span class="literal">true</span>,</span></span><br><span class="line"><span class="actionscript">        classObj: &#123; red: <span class="literal">true</span>, thin: <span class="literal">true</span>, italic: <span class="literal">false</span>, active: <span class="literal">false</span> &#125;</span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="b-style操作"><a href="#b-style操作" class="headerlink" title="b)  style操作"></a>b)  style操作</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 对象就是无序键值对的集合 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">"styleObj1"</span>&gt;</span>标题1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span> </span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">"[styleObj1,styleObj2]"</span>&gt;</span>标题2<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        styleObj1: &#123; color: <span class="string">'red'</span>, <span class="string">'font-weight'</span>: <span class="number">200</span> &#125;,</span></span><br><span class="line"><span class="actionscript">        styleObj2: &#123; <span class="string">'font-style'</span>: <span class="string">'italic'</span> &#125;</span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-9-vue循环"><a href="#2-9-vue循环" class="headerlink" title="2.9 vue循环"></a>2.9 vue循环</h2><h3 id="a-循环普通数据"><a href="#a-循环普通数据" class="headerlink" title="a) 循环普通数据"></a>a) 循环普通数据</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    </span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;list[0]&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;list[1]&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;list[2]&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;list[3]&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;list[4]&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>--------------------------------------------<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item, i) in list"</span>&gt;</span>索引值：&#123;&#123;i&#125;&#125; --- 每一项：&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line">        list: [1, 2, 3, 4, 5, 6]</span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="b-循环对象数组"><a href="#b-循环对象数组" class="headerlink" title="b) 循环对象数组"></a>b) 循环对象数组</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(user, i) in list"</span>&gt;</span>Id：&#123;&#123; user.id &#125;&#125; --- 名字：&#123;&#123; user.name &#125;&#125; --- 索引：&#123;&#123;i&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line">        list: [</span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">1</span>, name: <span class="string">'zs1'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">2</span>, name: <span class="string">'zs2'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">3</span>, name: <span class="string">'zs3'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">4</span>, name: <span class="string">'zs4'</span> &#125;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="c-循环对象"><a href="#c-循环对象" class="headerlink" title="c) 循环对象"></a>c) 循环对象</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(val, key, i) in user"</span>&gt;</span>值是： &#123;&#123; val &#125;&#125; --- 键是： &#123;&#123;key&#125;&#125; -- 索引： &#123;&#123;i&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line">        user: &#123;</span><br><span class="line">          id: 1,</span><br><span class="line"><span class="actionscript">          name: <span class="string">'托尼·屎大颗'</span>,</span></span><br><span class="line"><span class="actionscript">          gender: <span class="string">'男'</span></span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="d-循环数字"><a href="#d-循环数字" class="headerlink" title="d) 循环数字"></a>d) 循环数字</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- in 后面还可以放数字 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"count in 10"</span>&gt;</span>这是第 &#123;&#123; count &#125;&#125; 次循环<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="e-循环中key的使用"><a href="#e-循环中key的使用" class="headerlink" title="e) 循环中key的使用"></a>e) 循环中key的使用</h3><p>当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “<strong>就地复用</strong>” 策略。如果数据项的顺序被改变，Vue将<strong>不是移动 DOM 元素来匹配数据项的顺序</strong>， 而是<strong>简单复用此处每个元素</strong>，并且确保它在特定索引下显示已被渲染过的每个元素。</p>
<p>为了给 Vue 一个提示，<strong>以便它能跟踪每个节点的身份，从而重用和重新排序现有元素</strong>，你需要为每项提供一个唯一 key 属性。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span>Id:</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"id"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span>Name:</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"添加"</span> @<span class="attr">click</span>=<span class="string">"add"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="comment">&lt;!--:key的作用：保证数据和页面的关联，让数据和页面一一对应。这个地方如果不加key，在给某一个input打钩之后再新增数据就会出现问题--&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 注意： v-for 循环的时候，key 属性的值只能是number或者string，否则报错 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"item in list"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span>&gt;</span>&#123;&#123;item.id&#125;&#125; --- &#123;&#123;item.name&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        id: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        name: <span class="string">''</span>,</span></span><br><span class="line">        list: [</span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">1</span>, name: <span class="string">'李斯'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">2</span>, name: <span class="string">'嬴政'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">3</span>, name: <span class="string">'赵高'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">4</span>, name: <span class="string">'韩非'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">5</span>, name: <span class="string">'荀子'</span> &#125;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line"><span class="actionscript">        add() &#123; <span class="comment">// 添加方法</span></span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.list.unshift(&#123; id: <span class="keyword">this</span>.id, name: <span class="keyword">this</span>.name &#125;)</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-10-v-if和v-show"><a href="#2-10-v-if和v-show" class="headerlink" title="2.10 v-if和v-show"></a>2.10 v-if和v-show</h2><pre><code>一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。</code></pre><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"toffle1"</span> @<span class="attr">click</span>=<span class="string">"toggle"</span>&gt;</span> </span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"toggle2"</span> @<span class="attr">click</span>=<span class="string">"flag=!flag"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- v-if 的特点：每次都会重新删除或创建元素,有较高的切换性能消耗 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span>这是用v-if控制的元素<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-show</span>=<span class="string">"flag"</span>&gt;</span>这是用v-show控制的元素<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        flag: <span class="literal">false</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        toggle() &#123;</span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.flag = !<span class="keyword">this</span>.flag</span></span><br><span class="line">        &#125; </span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-11-品牌管理案例"><a href="#2-11-品牌管理案例" class="headerlink" title="2.11 品牌管理案例"></a>2.11 品牌管理案例</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"./lib/bootstrap-3.3.7.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel panel-primary"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel-heading"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h3</span> <span class="attr">class</span>=<span class="string">"panel-title"</span>&gt;</span>添加品牌<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel-body form-inline"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">          Id:</span><br><span class="line">          <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">v-model</span>=<span class="string">"id"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">          Name:</span><br><span class="line">          <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"添加"</span> <span class="attr">class</span>=<span class="string">"btn btn-primary"</span> @<span class="attr">click</span>=<span class="string">"add()"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">          搜索名称关键字：</span><br><span class="line">          <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">v-model</span>=<span class="string">"keywords"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-bordered table-hover table-striped"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">th</span>&gt;</span>Id<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">th</span>&gt;</span>Name<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">th</span>&gt;</span>Ctime<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">th</span>&gt;</span>Operation<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 之前， v-for中的数据，都是直接从data上的list中直接渲染过来的 --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 现在， 我们自定义了一个search方法，调用这个方法获取数据 --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 在 search 方法内部，通过执行for循环， 把所有符合搜索关键字的数据，保存到 一个新数组中返回 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span> <span class="attr">v-for</span>=<span class="string">"item in search()"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.id &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">td</span> <span class="attr">v-text</span>=<span class="string">"item.name"</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.ctime &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"del(item.id)"</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        id: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        name: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        keywords: <span class="string">''</span>, <span class="comment">// 搜索的关键字</span></span></span><br><span class="line">        list: [</span><br><span class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">'奔驰'</span>, <span class="attr">ctime</span>: <span class="keyword">new</span> <span class="built_in">Date</span>() &#125;,</span></span><br><span class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">'宝马'</span>, <span class="attr">ctime</span>: <span class="keyword">new</span> <span class="built_in">Date</span>() &#125;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line"><span class="actionscript">        add() &#123; <span class="comment">// 添加的方法</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> car = &#123; <span class="attr">id</span>: <span class="keyword">this</span>.id, <span class="attr">name</span>: <span class="keyword">this</span>.name, <span class="attr">ctime</span>: <span class="keyword">new</span> <span class="built_in">Date</span>() &#125;</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.list.push(car)</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.id = <span class="keyword">this</span>.name = <span class="string">''</span></span></span><br><span class="line">        &#125;,</span><br><span class="line"><span class="actionscript">        del(id) &#123; <span class="comment">// 根据Id删除数据</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> index = <span class="keyword">this</span>.list.findIndex(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span></span><br><span class="line">            if (item.id == id) &#123;</span><br><span class="line"><span class="actionscript">              <span class="keyword">return</span> <span class="literal">true</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;)</span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.list.splice(index, <span class="number">1</span>)</span></span><br><span class="line">        &#125;,</span><br><span class="line">        search() &#123; </span><br><span class="line"><span class="actionscript">          <span class="comment">// 根据关键字，进行数据的搜索</span></span></span><br><span class="line"><span class="actionscript">          <span class="comment">// 注意：  forEach   some   filter   findIndex   这些都属于数组的新方法，都会对数组中的每一项，进行遍历，执行相关的操作；</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> <span class="keyword">this</span>.list.filter(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="actionscript">            <span class="comment">// if(item.name.indexOf(keywords) != -1)</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">            <span class="comment">// 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')。如果包含，则返回 true ，否则返回 false</span></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">if</span> (item.name.includes(<span class="keyword">this</span>.keywords)) &#123;</span></span><br><span class="line"><span class="actionscript">              <span class="keyword">return</span> item</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-12-Vue-devtools"><a href="#2-12-Vue-devtools" class="headerlink" title="2.12 Vue-devtools"></a>2.12 Vue-devtools</h2><h4 id="a-将vue-devtools拷贝到本地"><a href="#a-将vue-devtools拷贝到本地" class="headerlink" title="a) 将vue-devtools拷贝到本地"></a>a) 将vue-devtools拷贝到本地</h4><p><a href="https://github.com/vuejs/vue-devtools.git" target="_blank" rel="noopener">https://github.com/vuejs/vue-devtools.git</a></p>
<h4 id="b-在vue-devtools目录下安装依赖包"><a href="#b-在vue-devtools目录下安装依赖包" class="headerlink" title="b) 在vue-devtools目录下安装依赖包"></a>b) 在vue-devtools目录下安装依赖包</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd vue-devtools</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>

<h4 id="c-编译代码"><a href="#c-编译代码" class="headerlink" title="c) 编译代码"></a>c) 编译代码</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>

<h4 id="d-修改manifest-json文件"><a href="#d-修改manifest-json文件" class="headerlink" title="d) 修改manifest.json文件"></a>d) 修改manifest.json文件</h4><p>修改   <code>vue-devtools/shells/chrome/manifest.json</code>文件，将 persistent改成 true</p>
<h4 id="e-添加谷歌扩展程序"><a href="#e-添加谷歌扩展程序" class="headerlink" title="e) 添加谷歌扩展程序"></a>e) 添加谷歌扩展程序</h4><pre><code>打开开发者模式
启用vue-devtools
允许访问文件地址</code></pre><h1 id="3-过滤器、按键修饰符、自定义指令"><a href="#3-过滤器、按键修饰符、自定义指令" class="headerlink" title="3 过滤器、按键修饰符、自定义指令"></a>3 过滤器、按键修饰符、自定义指令</h1><h2 id="3-1-过滤器"><a href="#3-1-过滤器" class="headerlink" title="3.1 过滤器"></a>3.1 过滤器</h2><p>概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；</p>
<h3 id="3-1-1-私有过滤器"><a href="#3-1-1-私有过滤器" class="headerlink" title="3.1.1 私有过滤器"></a>3.1.1 私有过滤器</h3><ol>
<li>HTML元素：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;&#123;&#123; msg | msgFormat(<span class="string">'疯狂+1'</span>, <span class="string">'123'</span>) | test &#125;&#125;&lt;<span class="regexp">/p&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>私有 <code>filters</code> 定义方式：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;script&gt;</span><br><span class="line">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">      el: <span class="string">'#app'</span>,</span><br><span class="line">      data: &#123;</span><br><span class="line">        msg: <span class="string">'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'</span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line">	  filters: &#123; </span><br><span class="line">        <span class="comment">// 过滤器的三个参数：1.要过滤的文本   2.过滤的内容   3.替换的内容</span></span><br><span class="line">        <span class="comment">// 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器</span></span><br><span class="line">        msgFormat: <span class="function"><span class="keyword">function</span> (<span class="params">msg, arg, arg2</span>) </span>&#123;</span><br><span class="line">           <span class="comment">// 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则</span></span><br><span class="line">		   <span class="keyword">return</span> msg.replace(<span class="regexp">/少年/g</span>, arg + arg2)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;);</span><br><span class="line">  &lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>body&gt;</span><br></pre></td></tr></table></figure>

<h3 id="3-1-2-全局过滤器"><a href="#3-1-2-全局过滤器" class="headerlink" title="3.1.2 全局过滤器"></a>3.1.2 全局过滤器</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div id=<span class="string">"app"</span>&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123; msg | msgFormat(<span class="string">'疯狂+1'</span>, <span class="string">'123'</span>) | test &#125;&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line">  &lt;script&gt;</span><br><span class="line">    <span class="comment">// 定义一个 Vue 全局的过滤器，名字叫做  msgFormat</span></span><br><span class="line">    Vue.filter(<span class="string">'msgFormat'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">msg, arg, arg2</span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则</span></span><br><span class="line">      <span class="keyword">return</span> msg.replace(<span class="regexp">/单纯/g</span>, arg + arg2)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    Vue.filter(<span class="string">'test'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">msg</span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> msg + <span class="string">'========'</span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">      el: <span class="string">'#app'</span>,</span><br><span class="line">      data: &#123;</span><br><span class="line">        msg: <span class="string">'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'</span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>body&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！</p>
</blockquote>
<h2 id="3-2-键盘修饰符"><a href="#3-2-键盘修饰符" class="headerlink" title="3.2 键盘修饰符"></a>3.2 键盘修饰符</h2><h3 id="3-2-1-键盘修饰符"><a href="#3-2-1-键盘修饰符" class="headerlink" title="3.2.1  键盘修饰符"></a>3.2.1  键盘修饰符</h3><p><a href="https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">"text"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"form-control"</span> v-model=<span class="string">"name"</span> @keyup.enter=<span class="string">"add"</span>&gt;</span><br></pre></td></tr></table></figure>

<h3 id="3-3-2-自定义键盘修饰符"><a href="#3-3-2-自定义键盘修饰符" class="headerlink" title="3.3.2 自定义键盘修饰符"></a>3.3.2 自定义键盘修饰符</h3><ol>
<li>通过<code>Vue.config.keyCodes.名称 = 按键值</code>来自定义案件修饰符的别名：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//约定113对应f2</span></span><br><span class="line">Vue.config.keyCodes.f2 = <span class="number">113</span>;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>使用自定义的按键修饰符：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">"text"</span> v-model=<span class="string">"name"</span> @keyup.f2=<span class="string">"add"</span>&gt;</span><br></pre></td></tr></table></figure>

<h2 id="3-3-自定义指令"><a href="#3-3-自定义指令" class="headerlink" title="3.3 自定义指令"></a>3.3 自定义指令</h2><p><a href="https://cn.vuejs.org/v2/guide/custom-directive.html" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/custom-directive.html</a></p>
<h3 id="3-3-1-自定义全局指令"><a href="#3-3-1-自定义全局指令" class="headerlink" title="3.3.1 自定义全局指令"></a>3.3.1 自定义全局指令</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：</span></span><br><span class="line"><span class="comment">// 其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用</span></span><br><span class="line"><span class="comment">//           参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作</span></span><br><span class="line">Vue.directive(<span class="string">'focus'</span>, &#123;</span><br><span class="line">    bind: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123; </span><br><span class="line">        <span class="comment">// 每当指令绑定到元素上的时候，会立即执行这个bind 函数，只执行一次</span></span><br><span class="line">        <span class="comment">// 注意： 在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象</span></span><br><span class="line">        <span class="comment">// 在元素刚绑定了指令的时候还没有插入到DOM中去的时候调用focus方法没有作用。因为，一个元素只有插入DOM之后才能获取焦点</span></span><br><span class="line">        <span class="comment">// el.focus()</span></span><br><span class="line">    &#125;,</span><br><span class="line">    inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;  </span><br><span class="line">        <span class="comment">// inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】。和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效</span></span><br><span class="line">        el.focus()</span><br><span class="line">    &#125;,</span><br><span class="line">    updated: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;  </span><br><span class="line">        <span class="comment">// 当VNode更新的时候，会执行 updated， 可能会触发多次</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="3-3-2-自定义局部指令"><a href="#3-3-2-自定义局部指令" class="headerlink" title="3.3.2 自定义局部指令"></a>3.3.2 自定义局部指令</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：</span></span><br><span class="line">directives: &#123; </span><br><span class="line">    <span class="comment">// 自定义私有指令</span></span><br><span class="line">    <span class="string">'fontweight'</span>: &#123; </span><br><span class="line">        <span class="comment">// 设置字体粗细的</span></span><br><span class="line">        bind: <span class="function"><span class="keyword">function</span> (<span class="params">el, binding</span>) </span>&#123;</span><br><span class="line">            el.style.fontWeight = binding.value</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">   <span class="string">'fontsize'</span>: <span class="function"><span class="keyword">function</span> (<span class="params">el, binding</span>) </span>&#123; </span><br><span class="line">        <span class="comment">// 注意：这个 function 等同于把代码写到了 bind 和 update 中去</span></span><br><span class="line">        el.style.fontSize = <span class="built_in">parseInt</span>(binding.value) + <span class="string">'px'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-3-3-使用自定义指令"><a href="#3-3-3-使用自定义指令" class="headerlink" title="3.3.3 使用自定义指令"></a>3.3.3 使用自定义指令</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h3 v-color=<span class="string">"'pink'"</span> v-fontweight=<span class="string">"900"</span> v-fontsize=<span class="string">"50"</span>&gt;这是h3标题&lt;<span class="regexp">/h3&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="3-4-品牌管理案例重写"><a href="#3-4-品牌管理案例重写" class="headerlink" title="3.4 品牌管理案例重写"></a>3.4 品牌管理案例重写</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"./lib/bootstrap-3.3.7.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel panel-primary"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel-heading"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h3</span> <span class="attr">class</span>=<span class="string">"panel-title"</span>&gt;</span>添加品牌<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel-body form-inline"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">          Id:</span><br><span class="line">          <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">v-model</span>=<span class="string">"id"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">          Name:</span><br><span class="line">		   <span class="comment">&lt;!-- 使用自定义键盘修饰符 --&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">v-model</span>=<span class="string">"name"</span> @<span class="attr">keyup.f2</span>=<span class="string">"add"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"添加"</span> <span class="attr">class</span>=<span class="string">"btn btn-primary"</span> @<span class="attr">click</span>=<span class="string">"add()"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">          搜索名称关键字：</span><br><span class="line">          <span class="comment">&lt;!-- 注意： Vue中所有的指令，在调用的时候，都以 v- 开头</span></span><br><span class="line"><span class="comment">                 v-focus v-color	自动获取焦点和设置文本颜色为绿色 --&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">v-model</span>=<span class="string">"keywords"</span> <span class="attr">id</span>=<span class="string">"search"</span> <span class="attr">v-focus</span> <span class="attr">v-color</span>=<span class="string">"'green'"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-bordered table-hover table-striped"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">th</span>&gt;</span>Id<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">th</span>&gt;</span>Name<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">th</span>&gt;</span>Ctime<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">th</span>&gt;</span>Operation<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span> <span class="attr">v-for</span>=<span class="string">"item in search(keywords)"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.id &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">td</span> <span class="attr">v-text</span>=<span class="string">"item.name"</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">		   <span class="comment">&lt;!-- 过滤器调用时候的格式    &#123;&#123; name | 过滤器的名称 &#125;&#125; --&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.ctime | dateFormat() &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"del(item.id)"</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app2"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-color</span>=<span class="string">"'pink'"</span> <span class="attr">v-fontweight</span>=<span class="string">"900"</span> <span class="attr">v-fontsize</span>=<span class="string">"50"</span>&gt;</span>&#123;&#123; dt | dateFormat &#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 全局的过滤器， 进行时间的格式化</span></span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 所谓的全局过滤器，就是所有的VM实例都共享的</span></span></span><br><span class="line"><span class="actionscript">    Vue.filter(<span class="string">'dateFormat'</span>, <span class="function"><span class="keyword">function</span> <span class="params">(dateStr, pattern = <span class="string">""</span>)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 根据给定的时间字符串，得到特定的时间</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="built_in">Date</span>(dateStr)</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">      <span class="comment">//   yyyy-mm-dd</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> y = dt.getFullYear()</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> m = dt.getMonth() + <span class="number">1</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> d = dt.getDate()</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">      <span class="keyword">if</span> (pattern.toLowerCase() === <span class="string">'yyyy-mm-dd'</span>) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span>`</span></span></span><br><span class="line"><span class="actionscript">      &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> hh = dt.getHours()</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> mm = dt.getMinutes()</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> ss = dt.getSeconds()</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span> <span class="subst">$&#123;hh&#125;</span>:<span class="subst">$&#123;mm&#125;</span>:<span class="subst">$&#123;ss&#125;</span>`</span></span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 自定义全局按键修饰符</span></span></span><br><span class="line">    Vue.config.keyCodes.f2 = 113</span><br><span class="line"><span class="actionscript">    <span class="comment">// 压缩版的vue.js如果要开启Vue的devtools的需要设置下面代码</span></span></span><br><span class="line"><span class="actionscript">	Vue.config.devtools = <span class="literal">true</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// Vue.directive()定义全局的指令  v-focus</span></span></span><br><span class="line"><span class="actionscript">    Vue.directive(<span class="string">'focus'</span>, &#123;</span></span><br><span class="line"><span class="actionscript">      bind: <span class="function"><span class="keyword">function</span> <span class="params">(el)</span> </span>&#123; </span></span><br><span class="line">      &#125;,</span><br><span class="line"><span class="actionscript">      inserted: <span class="function"><span class="keyword">function</span> <span class="params">(el)</span> </span>&#123;  </span></span><br><span class="line">        el.focus()</span><br><span class="line">      &#125;,</span><br><span class="line"><span class="actionscript">      updated: <span class="function"><span class="keyword">function</span> <span class="params">(el)</span> </span>&#123;  </span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 自定义一个设置字体颜色的指令</span></span></span><br><span class="line"><span class="actionscript">    Vue.directive(<span class="string">'color'</span>, &#123;</span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 样式:只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式</span></span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 将来元素肯定会显示到页面中，这时候浏览器的渲染引擎必然会解析样式，应用给这个元素</span></span></span><br><span class="line"><span class="actionscript">      bind: <span class="function"><span class="keyword">function</span> <span class="params">(el, binding)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="comment">// el.style.color = 'red'</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">// console.log(binding.name)</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">        <span class="comment">// console.log(binding.value)</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">// console.log(binding.expression)</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">		<span class="comment">// 和样式相关的操作，一般都可以在 bind 执行</span></span></span><br><span class="line">        el.style.color = binding.value</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        id: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        name: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        keywords: <span class="string">''</span>, <span class="comment">// 搜索的关键字</span></span></span><br><span class="line">        list: [</span><br><span class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">'奔驰'</span>, <span class="attr">ctime</span>: <span class="keyword">new</span> <span class="built_in">Date</span>() &#125;,</span></span><br><span class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">'宝马'</span>, <span class="attr">ctime</span>: <span class="keyword">new</span> <span class="built_in">Date</span>() &#125;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line"><span class="actionscript">        add() &#123; <span class="comment">// 添加的方法</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> car = &#123; <span class="attr">id</span>: <span class="keyword">this</span>.id, <span class="attr">name</span>: <span class="keyword">this</span>.name, <span class="attr">ctime</span>: <span class="keyword">new</span> <span class="built_in">Date</span>() &#125;</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.list.push(car)</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.id = <span class="keyword">this</span>.name = <span class="string">''</span></span></span><br><span class="line">        &#125;,</span><br><span class="line"><span class="actionscript">        del(id) &#123; <span class="comment">// 根据Id删除数据</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> index = <span class="keyword">this</span>.list.findIndex(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span></span><br><span class="line">            if (item.id == id) &#123;</span><br><span class="line"><span class="actionscript">              <span class="keyword">return</span> <span class="literal">true</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;)</span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.list.splice(index, <span class="number">1</span>)</span></span><br><span class="line">        &#125;,</span><br><span class="line"><span class="actionscript">        search(keywords) &#123; <span class="comment">// 根据关键字，进行数据的搜索</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> <span class="keyword">this</span>.list.filter(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span></span><br><span class="line">            if (item.name.includes(keywords)) &#123;</span><br><span class="line"><span class="actionscript">              <span class="keyword">return</span> item</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 如何自定义一个私有的过滤器（局部）</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm2 = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app2'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="javascript">        dt: <span class="keyword">new</span> <span class="built_in">Date</span>()</span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line">      filters: &#123; </span><br><span class="line"><span class="actionscript">        <span class="comment">// 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器</span></span></span><br><span class="line"><span class="actionscript">        dateFormat: <span class="function"><span class="keyword">function</span> <span class="params">(dateStr, pattern = <span class="string">''</span>)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">          <span class="comment">// 根据给定的时间字符串，得到特定的时间</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="built_in">Date</span>(dateStr)</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">          <span class="keyword">var</span> y = dt.getFullYear()</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">var</span> m = (dt.getMonth() + <span class="number">1</span>).toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">var</span> d = dt.getDate().toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">          <span class="keyword">if</span> (pattern.toLowerCase() === <span class="string">'yyyy-mm-dd'</span>) &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span>`</span></span></span><br><span class="line"><span class="actionscript">          &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> hh = dt.getHours().toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> mm = dt.getMinutes().toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> ss = dt.getSeconds().toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span> <span class="subst">$&#123;hh&#125;</span>:<span class="subst">$&#123;mm&#125;</span>:<span class="subst">$&#123;ss&#125;</span> ~~~~~~~`</span></span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      directives: &#123; </span><br><span class="line"><span class="actionscript">	     <span class="comment">// 自定义私有指令</span></span></span><br><span class="line"><span class="actionscript">        <span class="string">'fontweight'</span>: &#123; </span></span><br><span class="line"><span class="actionscript">		  <span class="comment">// 设置字体粗细的</span></span></span><br><span class="line"><span class="actionscript">          bind: <span class="function"><span class="keyword">function</span> <span class="params">(el, binding)</span> </span>&#123;</span></span><br><span class="line">            el.style.fontWeight = binding.value</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line"><span class="actionscript">        <span class="string">'fontsize'</span>: <span class="function"><span class="keyword">function</span> <span class="params">(el, binding)</span> </span>&#123; </span></span><br><span class="line"><span class="actionscript">		  <span class="comment">// 注意：这个 function 等同于把代码写到了 bind 和 update 中去</span></span></span><br><span class="line"><span class="javascript">          el.style.fontSize = <span class="built_in">parseInt</span>(binding.value) + <span class="string">'px'</span></span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="4-Vue的生命周期"><a href="#4-Vue的生命周期" class="headerlink" title="4 Vue的生命周期"></a>4 Vue的生命周期</h1><h2 id="4-1-生命周期函数"><a href="#4-1-生命周期函数" class="headerlink" title="4.1 生命周期函数"></a>4.1 生命周期函数</h2><p><a href="https://cn.vuejs.org/v2/guide/instance.html" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/instance.html</a></p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E7%BA%BF%E4%B8%8A%E6%8E%88%E8%AF%BE/vue.js/3.4/readme/assets/lifecycle.png" alt="lifecycle"></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">    &lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span><br><span class="line">    &lt;meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"ie=edge"</span>&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">    &lt;script src="./</span>lib/vue<span class="number">-2.4</span><span class="number">.0</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">&lt;div id="</span>app<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;input type="</span>button<span class="string">" value="</span>修改msg<span class="string">" @click="</span>msg=<span class="string">'No'</span><span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;h3 id="</span>h3<span class="string">"&gt;&#123;&#123; msg &#125;&#125;&lt;/h3&gt;</span></span><br><span class="line"><span class="string">&lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;template id="</span>demo1<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;h2&gt;标签模版&lt;/h2&gt;</span></span><br><span class="line"><span class="string">&lt;/template&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script&gt;</span></span><br><span class="line"><span class="string">    // 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="string">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="string">        el: '#app',</span></span><br><span class="line"><span class="string">        //如果没有写template，则会将el的外部html作为模板进行编译</span></span><br><span class="line">        /*template:"#demo1",*/</span><br><span class="line">        data: &#123;</span><br><span class="line">            msg: <span class="string">'ok'</span></span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line">            show() &#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'执行了show方法'</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        beforeCreate() &#123;</span><br><span class="line">            <span class="comment">// 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前会执行它</span></span><br><span class="line">            <span class="comment">// console.log(this.msg)</span></span><br><span class="line">            <span class="comment">// this.show()</span></span><br><span class="line">            <span class="comment">// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的数据都还没有没初始化</span></span><br><span class="line">        &#125;,</span><br><span class="line">        created() &#123;</span><br><span class="line">            <span class="comment">// 这是遇到的第二个生命周期函数</span></span><br><span class="line">            <span class="comment">// console.log(this.msg)</span></span><br><span class="line">            <span class="comment">// this.show()</span></span><br><span class="line">            <span class="comment">//  在 created 中，data 和 methods 都已经被初始化好了！</span></span><br><span class="line">            <span class="comment">// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早只能在 created 中操作</span></span><br><span class="line">        &#125;,</span><br><span class="line">        beforeMount() &#123;</span><br><span class="line">            <span class="comment">// 这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中</span></span><br><span class="line">            <span class="comment">// console.log(document.getElementById('h3').innerText)</span></span><br><span class="line">            <span class="comment">// 在 beforeMount 执行的时候，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串</span></span><br><span class="line">        &#125;,</span><br><span class="line">        mounted() &#123;</span><br><span class="line">            <span class="comment">// 这是遇到的第4个生命周期函数，表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了</span></span><br><span class="line">            <span class="comment">// console.log(document.getElementById('h3').innerText)</span></span><br><span class="line">            <span class="comment">// 注意： mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示Vue实例已经被完全创建好了，此时如果没有其它操作的话，这个实例就静静的躺在我们的内存中一动不动</span></span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 接下来的是运行中的两个事件</span></span><br><span class="line">        beforeUpdate() &#123;</span><br><span class="line">            <span class="comment">// 这时候表示数据更新了但是界面还没有被更新</span></span><br><span class="line">            <span class="comment">/* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)</span></span><br><span class="line"><span class="comment">             console.log('data 中的 msg 数据是：' + this.msg) */</span></span><br><span class="line">            <span class="comment">// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步</span></span><br><span class="line">        &#125;,</span><br><span class="line">        updated() &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'界面上元素的内容：'</span> + <span class="built_in">document</span>.getElementById(<span class="string">'h3'</span>).innerText)</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'data 中的 msg 数据是：'</span> + <span class="keyword">this</span>.msg)</span><br><span class="line">            <span class="comment">// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">//如果在创建vm实例的时候没有挂载el，可以通过代码手动挂载</span></span><br><span class="line">    vm.$mount(<span class="string">"#app"</span>);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>body&gt;</span><br><span class="line"></span><br><span class="line">&lt;<span class="regexp">/html&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="4-2-Vue-nextTick"><a href="#4-2-Vue-nextTick" class="headerlink" title="4.2 Vue.nextTick()"></a>4.2 Vue.nextTick()</h2><h3 id="4-2-1-nextTick介绍"><a href="#4-2-1-nextTick介绍" class="headerlink" title="4.2.1 nextTick介绍"></a>4.2.1 nextTick介绍</h3><p>该方法会在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。</p>
<p>应用场景：</p>
<blockquote>
<ul>
<li>在Vue生命周期的<code>created()</code>钩子函数进行的DOM操作一定要放在<code>Vue.nextTick()</code>的回调函数中</li>
<li>在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进<code>Vue.nextTick()</code>的回调函数中。</li>
</ul>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">created() &#123;</span><br><span class="line">     <span class="comment">//改变数据</span></span><br><span class="line">    vm.message = <span class="string">'changed'</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">'testCount'</span>).innerHTML) <span class="comment">// 并不会得到'changed'</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//这样可以，nextTick里面的代码会在DOM更新后执行</span></span><br><span class="line">    Vue.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">'testCount'</span>).innerHTML) <span class="comment">//可以得到'changed'</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h3 id="4-2-2-nextTick-原理"><a href="#4-2-2-nextTick-原理" class="headerlink" title="4.2.2 nextTick()原理"></a>4.2.2 nextTick()原理</h3><h4 id="a-异步说明"><a href="#a-异步说明" class="headerlink" title="a) 异步说明"></a>a) 异步说明</h4><blockquote>
<p>Vue 实现响应式并<strong>不是数据发生变化之后 DOM 立即变化</strong>，而是按一定的策略进行 DOM 的更新。</p>
</blockquote>
<p>在 Vue 的<a href="https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97" target="_blank" rel="noopener">文档</a>中，说明 Vue 是异步执行 DOM 更新的。关于异步的解析，可以查看阮一峰老师的<a href="http://www.ruanyifeng.com/blog/2014/10/event-loop.html" target="_blank" rel="noopener">这篇文章，</a>截取关键部分如下：</p>
<p>具体来说，异步执行的运行机制如下。</p>
<blockquote>
<p>（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。<br>（2）主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。<br>（3）一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。<br>（4）主线程不断重复上面的第三步。</p>
</blockquote>
<p>下图就是主线程和任务队列的示意图。</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E7%BA%BF%E4%B8%8A%E6%8E%88%E8%AF%BE/vue.js/3.4/readme/assets/3835190331-580cd2a9443a7_articlex.png" alt="clipboard.png"></p>
<h4 id="b-事件循环说明"><a href="#b-事件循环说明" class="headerlink" title="b) 事件循环说明"></a>b) 事件循环说明</h4><p>简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。图解：</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E7%BA%BF%E4%B8%8A%E6%8E%88%E8%AF%BE/vue.js/3.4/readme/assets/1596618069-5a5da8c8522c2_articlex.png" alt="clipboard.png"></p>
<h2 id="4-3-nextTick-案例"><a href="#4-3-nextTick-案例" class="headerlink" title="4.3 nextTick()案例"></a>4.3 nextTick()案例</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//点击按钮显示文本输入框，同时让其获取焦点</span></span><br><span class="line">methods:&#123;</span><br><span class="line">   showsou()&#123;</span><br><span class="line">      <span class="keyword">this</span>.showit = <span class="literal">true</span></span><br><span class="line">      <span class="keyword">this</span>.$nextTick(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">// DOM 更新了</span></span><br><span class="line">        <span class="built_in">document</span>.getElementById(<span class="string">"keywords"</span>).focus()</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="5-axios使用"><a href="#5-axios使用" class="headerlink" title="5 axios使用"></a>5 axios使用</h1><p>在vue中，我们可以使用vue-resource去发送请求，也可以使用axios来发送请求<br>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。<br>Axios的特点：<br>•    从浏览器中创建XMLHttpRequests<br>•    从 node.js 创建http请求<br>•    支持PromiseAPI<br>•    拦截请求和响应<br>•    转换请求数据和响应数据<br>•    取消请求<br>•    自动转换 JSON 数据</p>
<h2 id="5-1-GER-POST"><a href="#5-1-GER-POST" class="headerlink" title="5.1 GER/POST"></a>5.1 GER/POST</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"># 这边测试服务器使用品牌列表的服务器</span><br><span class="line"></span><br><span class="line"><span class="comment">//全局配置axios</span></span><br><span class="line">axios.defaults.baseURL = <span class="string">'http://localhost:3000/'</span>;</span><br><span class="line">axios.defaults.headers.post[<span class="string">'Content-Type'</span>] = <span class="string">'application/x-www-form-urlencoded'</span>;</span><br><span class="line">axios.defaults.withCredentials = <span class="literal">true</span>; </span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el:<span class="string">"#app"</span>,</span><br><span class="line">    data:&#123;</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        testGet()&#123;</span><br><span class="line">            axios.get(<span class="string">'api/getnewslist'</span>,&#123;</span><br><span class="line">                params:&#123;</span><br><span class="line"></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">                .then(<span class="function"><span class="keyword">function</span> (<span class="params">response</span>) </span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(response.data);</span><br><span class="line">            &#125;)</span><br><span class="line">                .catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(error);</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;,</span><br><span class="line">        testPost()&#123;</span><br><span class="line">            axios.post(<span class="string">'api/news/new'</span>, &#123;</span><br><span class="line">                name: <span class="string">'李宁'</span>,</span><br><span class="line">                id: <span class="string">'1001'</span></span><br><span class="line">            &#125;)</span><br><span class="line">                .then(<span class="function"><span class="keyword">function</span> (<span class="params">response</span>) </span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(response.data);</span><br><span class="line">            &#125;)</span><br><span class="line">                .catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(error);</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="5-2-品牌列表案例重写"><a href="#5-2-品牌列表案例重写" class="headerlink" title="5.2 品牌列表案例重写"></a>5.2 品牌列表案例重写</h2><p>服务器代码参照资料中code—&gt;brand-list—&gt;server</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">    &lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span><br><span class="line">    &lt;meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"ie=edge"</span>&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">    &lt;link rel="stylesheet" href="./</span>bootstrap<span class="number">-3.3</span><span class="number">.7</span>.css<span class="string">"&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    &lt;script src="</span>./axios.min.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">    &lt;script src="</span>./vue<span class="number">-2.4</span><span class="number">.0</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">    &lt;div id="</span>app<span class="string">"&gt;</span></span><br><span class="line"><span class="string">        &lt;div class="</span>panel panel-primary<span class="string">"&gt;</span></span><br><span class="line"><span class="string">            &lt;div class="</span>panel-heading<span class="string">"&gt;</span></span><br><span class="line"><span class="string">                &lt;h3 class="</span>panel-title<span class="string">"&gt;添加品牌&lt;/h3&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class="</span>panel-body form-inline<span class="string">"&gt;</span></span><br><span class="line"><span class="string">                &lt;label&gt;</span></span><br><span class="line"><span class="string">                    &lt;!-- ref属性作用：在vue中可以根据this.$refs.ref_value 来获取页面元素 --&gt;</span></span><br><span class="line"><span class="string">                    Id:&lt;input type="</span>text<span class="string">" class="</span>form-control<span class="string">" v-model="</span>id<span class="string">" v-focus ref="</span>idInput<span class="string">"&gt;</span></span><br><span class="line"><span class="string">                &lt;/label&gt;</span></span><br><span class="line"><span class="string">            </span></span><br><span class="line"><span class="string">                &lt;label&gt;</span></span><br><span class="line"><span class="string">                    Name:&lt;input type="</span>text<span class="string">" class="</span>form-control<span class="string">" v-model="</span>name<span class="string">" @keydown.enter="</span>add<span class="string">"&gt;</span></span><br><span class="line"><span class="string">                &lt;/label&gt;</span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">                &lt;label&gt;</span></span><br><span class="line"><span class="string">                    搜索名称关键字：&lt;input type="</span>text<span class="string">" class="</span>form-control<span class="string">" v-font_size="</span><span class="number">30</span><span class="string">" v-model="</span>keywords<span class="string">"&gt;</span></span><br><span class="line"><span class="string">                &lt;/label&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        &lt;table class="</span>table table-bordered table-hover table-striped<span class="string">"&gt;</span></span><br><span class="line"><span class="string">            &lt;thead&gt;</span></span><br><span class="line"><span class="string">                &lt;tr&gt;</span></span><br><span class="line"><span class="string">                    &lt;th&gt;Id&lt;/th&gt;</span></span><br><span class="line"><span class="string">                    &lt;th&gt;Name&lt;/th&gt;</span></span><br><span class="line"><span class="string">                    &lt;th&gt;Ctime&lt;/th&gt;</span></span><br><span class="line"><span class="string">                    &lt;th&gt;Operation&lt;/th&gt;</span></span><br><span class="line"><span class="string">                &lt;/tr&gt;</span></span><br><span class="line"><span class="string">            &lt;/thead&gt;</span></span><br><span class="line"><span class="string">            &lt;tbody&gt;</span></span><br><span class="line"><span class="string">                &lt;!-- search()是根据keywords搜索内容来过滤数据源的  --&gt;</span></span><br><span class="line"><span class="string">                &lt;tr v-for="</span>item <span class="keyword">in</span> search()<span class="string">" :key="</span>item.id<span class="string">"&gt;</span></span><br><span class="line"><span class="string">                    &lt;td&gt;&#123;&#123;item.id&#125;&#125;&lt;/td&gt;</span></span><br><span class="line"><span class="string">                    &lt;td&gt;&#123;&#123;item.name&#125;&#125;&lt;/td&gt;</span></span><br><span class="line"><span class="string">                    &lt;td&gt;&#123;&#123;item.ctime|dateFormatter('yyyy-MM-dd')&#125;&#125;&lt;/td&gt;</span></span><br><span class="line"><span class="string">                    &lt;td&gt;&lt;input type="</span>button<span class="string">" value="</span>删除<span class="string">" @click="</span>del(item.id)<span class="string">"&gt;&lt;/td&gt;</span></span><br><span class="line"><span class="string">                &lt;/tr&gt;</span></span><br><span class="line"><span class="string">            &lt;/tbody&gt;</span></span><br><span class="line"><span class="string">        &lt;/table&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt; </span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script&gt;</span></span><br><span class="line"><span class="string">    axios.defaults.baseURL = 'http://localhost:3000/';</span></span><br><span class="line"><span class="string">    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    var vm = new Vue(&#123;</span></span><br><span class="line">        el:"#app",</span><br><span class="line">        data:&#123;</span><br><span class="line">            id:<span class="string">""</span>,</span><br><span class="line">            name:<span class="string">""</span>,</span><br><span class="line">            keywords:<span class="string">""</span>,</span><br><span class="line">            list:[</span><br><span class="line">                &#123;<span class="attr">id</span>:<span class="number">1</span>,<span class="attr">name</span>:<span class="string">"张三"</span>,<span class="attr">ctime</span>:<span class="keyword">new</span> <span class="built_in">Date</span>()&#125;,</span><br><span class="line">                &#123;<span class="attr">id</span>:<span class="number">2</span>,<span class="attr">name</span>:<span class="string">"李四"</span>,<span class="attr">ctime</span>:<span class="keyword">new</span> <span class="built_in">Date</span>()&#125;,</span><br><span class="line">                &#123;<span class="attr">id</span>:<span class="number">3</span>,<span class="attr">name</span>:<span class="string">"王五"</span>,<span class="attr">ctime</span>:<span class="keyword">new</span> <span class="built_in">Date</span>()&#125;,</span><br><span class="line">                &#123;<span class="attr">id</span>:<span class="number">4</span>,<span class="attr">name</span>:<span class="string">"赵六"</span>,<span class="attr">ctime</span>:<span class="keyword">new</span> <span class="built_in">Date</span>()&#125;,</span><br><span class="line">            ]</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">//在vue实例创建完毕之后发送请求获取数据</span></span><br><span class="line">        created()&#123;</span><br><span class="line">            <span class="keyword">this</span>.getBrandList();</span><br><span class="line">        &#125;,</span><br><span class="line">        methods:&#123;</span><br><span class="line">            <span class="comment">//获取品牌列表的</span></span><br><span class="line">            getBrandList()&#123;</span><br><span class="line">                axios.get(<span class="string">"api/getnewslist"</span>)</span><br><span class="line">                .then(<span class="function">(<span class="params">&#123;data&#125;</span>)=&gt;</span>&#123;</span><br><span class="line">                    <span class="keyword">if</span>(data.status == <span class="number">0</span>)&#123;</span><br><span class="line">                        <span class="keyword">this</span>.list = data.message;</span><br><span class="line">                    &#125;</span><br><span class="line">                    <span class="keyword">else</span>&#123;</span><br><span class="line">                        <span class="keyword">this</span>.list = [];</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;)</span><br><span class="line">                .catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">                    <span class="built_in">console</span>.log(error);</span><br><span class="line">                &#125;);</span><br><span class="line">            &#125;</span><br><span class="line">            ,</span><br><span class="line">            add()&#123;</span><br><span class="line">                <span class="keyword">if</span>(<span class="keyword">this</span>.id &amp;&amp; <span class="keyword">this</span>.name)&#123;</span><br><span class="line">                    axios.post(<span class="string">'api/news/new'</span>, &#123;</span><br><span class="line">                        name: <span class="keyword">this</span>.name</span><br><span class="line">                    &#125;)</span><br><span class="line">                    .then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">                        <span class="comment">//当添加用户成功之后重新去请求服务器</span></span><br><span class="line">                        <span class="keyword">this</span>.getBrandList();</span><br><span class="line">                    &#125;)</span><br><span class="line">                    .catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">                        <span class="built_in">console</span>.log(error);</span><br><span class="line">                    &#125;);</span><br><span class="line"></span><br><span class="line">                    <span class="comment">// //当添加数据完毕之后清空用户输入的内容</span></span><br><span class="line">                    <span class="keyword">this</span>.id = <span class="string">""</span>;</span><br><span class="line">                    <span class="keyword">this</span>.name = <span class="string">""</span>;</span><br><span class="line"></span><br><span class="line">                    <span class="comment">// //让id文本框获取焦点</span></span><br><span class="line">                    <span class="keyword">this</span>.$refs.idInput.focus();</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            del(id)&#123;</span><br><span class="line">                axios.get(<span class="string">"api/news/del/"</span>+id)</span><br><span class="line">                .then(<span class="function">(<span class="params">&#123;data&#125;</span>)=&gt;</span>&#123;</span><br><span class="line">                    <span class="keyword">this</span>.getBrandList();</span><br><span class="line">                &#125;)</span><br><span class="line">                .catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">                    <span class="built_in">console</span>.log(error);</span><br><span class="line">                &#125;);</span><br><span class="line">            &#125;,</span><br><span class="line">            search()&#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="keyword">this</span>.list.filter(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">                    <span class="keyword">if</span>(item.name.includes(<span class="keyword">this</span>.keywords))&#123;</span><br><span class="line">                        <span class="keyword">return</span> item;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        filters:&#123;</span><br><span class="line">            <span class="comment">//默认值参数</span></span><br><span class="line">            dateFormatter:<span class="function"><span class="keyword">function</span>(<span class="params">msg,pattern=<span class="string">''</span></span>)</span>&#123;</span><br><span class="line">                <span class="comment">//1.将msg时间字符串转换为时间对象</span></span><br><span class="line">                <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="built_in">Date</span>(msg)</span><br><span class="line">                <span class="comment">//2.获取到年月日时分秒的信息</span></span><br><span class="line">                <span class="keyword">var</span> year = dt.getFullYear();</span><br><span class="line">                <span class="keyword">var</span> month = (dt.getMonth()+<span class="number">1</span>).toString().padStart(<span class="number">2</span>,<span class="string">'0'</span>);</span><br><span class="line">                <span class="keyword">var</span> day = dt.getDate().toString().padStart(<span class="number">2</span>,<span class="string">'0'</span>);</span><br><span class="line">                <span class="keyword">var</span> hour = dt.getHours().toString().padStart(<span class="number">2</span>,<span class="string">'0'</span>);</span><br><span class="line">                <span class="keyword">var</span> minute = dt.getMinutes().toString().padStart(<span class="number">2</span>,<span class="string">'0'</span>);</span><br><span class="line">                <span class="keyword">var</span> second = dt.getSeconds().toString().padStart(<span class="number">2</span>,<span class="string">'0'</span>);</span><br><span class="line">                <span class="comment">//console.log(year,month,day,hour,minute,second)</span></span><br><span class="line">                <span class="comment">//3.根据pattern返回数据</span></span><br><span class="line">                <span class="keyword">if</span>(pattern == <span class="string">'yyyy-MM-dd'</span>)&#123;</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;year&#125;</span>-<span class="subst">$&#123;month&#125;</span>-<span class="subst">$&#123;day&#125;</span>`</span>;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="keyword">else</span>&#123;</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;year&#125;</span>-<span class="subst">$&#123;month&#125;</span>-<span class="subst">$&#123;day&#125;</span> <span class="subst">$&#123;hour&#125;</span>:<span class="subst">$&#123;minute&#125;</span>:<span class="subst">$&#123;second&#125;</span>`</span>;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">//自定义私有指令</span></span><br><span class="line">        directives:&#123;</span><br><span class="line">            focus:&#123;</span><br><span class="line">                inserted(el)&#123;</span><br><span class="line">                    el.focus();</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            font_size:&#123;</span><br><span class="line">                inserted(el,binding)&#123;</span><br><span class="line">                    el.style.fontSize = binding.value+<span class="string">"px"</span>;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;/</span>html&gt;</span><br></pre></td></tr></table></figure>

<h1 id="6-Vue中的动画"><a href="#6-Vue中的动画" class="headerlink" title="6 Vue中的动画"></a>6 Vue中的动画</h1><p><a href="https://cn.vuejs.org/v2/guide/transitions.html" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/transitions.html</a></p>
<p>Vue 在插入、更新或者移除 DOM 时，提供下面的多种不同方式的应用过渡效果。</p>
<blockquote>
<ul>
<li>在 CSS 过渡和动画中自动应用 class —过渡类名</li>
<li>可以配合使用第三方 CSS 动画库，如 Animate.css</li>
<li>在过渡钩子函数中使用 JavaScript 直接操作 DOM  </li>
<li>可以配合使用第三方 JavaScript 动画库，如 Velocity.js</li>
</ul>
</blockquote>
<h2 id="6-1-不使用动画"><a href="#6-1-不使用动画" class="headerlink" title="6.1 不使用动画"></a>6.1 不使用动画</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"toggle"</span> @<span class="attr">click</span>=<span class="string">"flag=!flag"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span>这是一个H3<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        flag: <span class="literal">false</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="6-2-使用过渡类名"><a href="#6-2-使用过渡类名" class="headerlink" title="6.2 使用过渡类名"></a>6.2 使用过渡类名</h2><p>Vue 提供了内置的过渡封装组件(transition)，该组件用于包裹要实现过渡效果的组件。</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E7%BA%BF%E4%B8%8A%E6%8E%88%E8%AF%BE/vue.js/3.4/readme/assets/1544748438460.png" alt="1544748438460"></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span><br><span class="line">  &lt;meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"ie=edge"</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">  &lt;script src="./</span>lib/vue<span class="number">-2.4</span><span class="number">.0</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">  &lt;!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 --&gt;</span></span><br><span class="line"><span class="string">  &lt;style&gt;</span></span><br><span class="line"><span class="string">	h3&#123;</span></span><br><span class="line"><span class="string">		background-color:red;</span></span><br><span class="line"><span class="string">		width:100px;</span></span><br><span class="line"><span class="string">	&#125;</span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">    /*全场动画：使用过渡类名*/</span></span><br><span class="line"><span class="string">    /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */</span></span><br><span class="line"><span class="string">    /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了 */</span></span><br><span class="line"><span class="string">    .v-enter,</span></span><br><span class="line"><span class="string">    .v-leave-to &#123;</span></span><br><span class="line"><span class="string">      opacity: 0;</span></span><br><span class="line"><span class="string">      transform: translateX(150px);</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">    /* v-enter-active 【入场动画的时间段】 */</span></span><br><span class="line"><span class="string">    /* v-leave-active 【离场动画的时间段】 */</span></span><br><span class="line"><span class="string">    .v-enter-active&#123;</span></span><br><span class="line"><span class="string">		transition: all 1.8s ease;</span></span><br><span class="line"><span class="string">	&#125;</span></span><br><span class="line"><span class="string">    .v-leave-active&#123;</span></span><br><span class="line"><span class="string">      transition: all 0.8s ease;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &lt;/style&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">  &lt;div id="</span>app<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;input type="</span>button<span class="string">" value="</span>toggle<span class="string">" @click="</span>flag=!flag<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 --&gt;</span></span><br><span class="line"><span class="string">    &lt;!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 --&gt;</span></span><br><span class="line"><span class="string">    &lt;transition&gt;</span></span><br><span class="line"><span class="string">      &lt;h3 v-if="</span>flag<span class="string">"&gt;这是一个H3&lt;/h3&gt;</span></span><br><span class="line"><span class="string">    &lt;/transition&gt;</span></span><br><span class="line"><span class="string">  &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  &lt;script&gt;</span></span><br><span class="line"><span class="string">    // 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="string">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="string">      el: '#app',</span></span><br><span class="line"><span class="string">      data: &#123;</span></span><br><span class="line"><span class="string">        flag: false</span></span><br><span class="line"><span class="string">      &#125;,</span></span><br><span class="line"><span class="string">      methods: &#123;&#125;</span></span><br><span class="line"><span class="string">    &#125;);</span></span><br><span class="line"><span class="string">  &lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="6-3-修改动画前缀"><a href="#6-3-修改动画前缀" class="headerlink" title="6.3 修改动画前缀"></a>6.3 修改动画前缀</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.my-enter</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-class">.my-leave-to</span> &#123;</span></span><br><span class="line">      opacity: 0;</span><br><span class="line">      transform: translateY(70px);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.my-enter-active</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-class">.my-leave-active</span>&#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">transition</span>: <span class="selector-tag">all</span> 0<span class="selector-class">.8s</span> <span class="selector-tag">ease</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"toggle2"</span> @<span class="attr">click</span>=<span class="string">"flag2=!flag2"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"my"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h6</span> <span class="attr">v-if</span>=<span class="string">"flag2"</span>&gt;</span>这是一个H6<span class="tag">&lt;/<span class="name">h6</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        flag: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">        flag2: <span class="literal">false</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="6-4-AnimateCSS"><a href="#6-4-AnimateCSS" class="headerlink" title="6.4 AnimateCSS"></a>6.4 AnimateCSS</h2><p>animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。</p>
<p><a href="https://daneden.github.io/animate.css/" target="_blank" rel="noopener">https://daneden.github.io/animate.css/</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"./lib/animate.css"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 入场 bounceIn    离场 bounceOut --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"toggle"</span> @<span class="attr">click</span>=<span class="string">"flag=!flag"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">enter-active-class</span>=<span class="string">"animated bounceIn"</span> <span class="attr">leave-active-class</span>=<span class="string">"animated bounceOut"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span>这是一个H3<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 </span></span><br><span class="line"><span class="comment">            注意：这边duration时间设置过长无效--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">enter-active-class</span>=<span class="string">"bounceIn"</span> <span class="attr">leave-active-class</span>=<span class="string">"bounceOut"</span> <span class="attr">:duration</span>=<span class="string">"200"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">"flag"</span> <span class="attr">class</span>=<span class="string">"animated"</span>&gt;</span>这是一个H3<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用  :duration="&#123; enter: 200, leave: 400 &#125;"  来分别设置 入场的时长 和 离场的时长  --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">enter-active-class</span>=<span class="string">"bounceIn"</span> <span class="attr">leave-active-class</span>=<span class="string">"bounceOut"</span> <span class="attr">:duration</span>=<span class="string">"&#123; enter: 200, leave: 400 &#125;"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">"flag"</span> <span class="attr">class</span>=<span class="string">"animated"</span>&gt;</span>这是一个H3<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span> </span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        flag: <span class="literal">false</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="6-5-动画的钩子函数"><a href="#6-5-动画的钩子函数" class="headerlink" title="6.5 动画的钩子函数"></a>6.5 动画的钩子函数</h2><p>Vue2实现动画的方式可以是css也可以js钩子，大部分情况下css3即可满足，但若是需要在实现动画过程中进行位置计算，那就需要使用js钩子函数来进行</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">        <span class="selector-class">.ball</span> &#123;</span></span><br><span class="line">            width: 15px;</span><br><span class="line">            height: 15px;</span><br><span class="line">            border-radius: 50%;</span><br><span class="line">            background-color: red;</span><br><span class="line">        &#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"快到碗里来"</span> @<span class="attr">click</span>=<span class="string">"flag=!flag"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 1. 使用 transition 元素把 小球包裹起来 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span></span></span><br><span class="line"><span class="tag">            @<span class="attr">before-enter</span>=<span class="string">"beforeEnter"</span></span></span><br><span class="line"><span class="tag">            @<span class="attr">enter</span>=<span class="string">"enter"</span></span></span><br><span class="line"><span class="tag">            @<span class="attr">after-enter</span>=<span class="string">"afterEnter"</span></span></span><br><span class="line"><span class="tag">            @<span class="attr">before-leave</span>=<span class="string">"beforeLeave"</span></span></span><br><span class="line"><span class="tag">            @<span class="attr">leave</span>=<span class="string">"leave"</span></span></span><br><span class="line"><span class="tag">            @<span class="attr">after-leave</span>=<span class="string">"afterLeave"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"ball"</span> <span class="attr">v-show</span>=<span class="string">"flag"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">        el: <span class="string">'#app'</span>,</span></span><br><span class="line">        data: &#123;</span><br><span class="line"><span class="actionscript">            flag: <span class="literal">false</span></span></span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line"><span class="actionscript">            <span class="comment">//el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象</span></span></span><br><span class="line">            beforeEnter(el)&#123;</span><br><span class="line"><span class="actionscript">                <span class="comment">// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式</span></span></span><br><span class="line"><span class="actionscript">                el.style.transform = <span class="string">"translate(0px, 0px)"</span></span></span><br><span class="line">                el.style.opacity = 0.0</span><br><span class="line">            &#125;,</span><br><span class="line"><span class="actionscript">            <span class="comment">//当只有javascript过渡的时候，在enter和leave中必须使用done进行回调。done的作用其实是调用afterEnter和afterLeave方法</span></span></span><br><span class="line">            enter(el,done)&#123;</span><br><span class="line"><span class="actionscript">                <span class="comment">//el.offsetWidth 会强制动画刷新</span></span></span><br><span class="line">                el.offsetWidth</span><br><span class="line"><span class="actionscript">                <span class="comment">// enter 表示动画 开始之后的样式，在这里可以设置小球完成动画之后的结束状态</span></span></span><br><span class="line"><span class="actionscript">                el.style.transform = <span class="string">"translate(150px, 450px)"</span></span></span><br><span class="line"><span class="actionscript">                el.style.transition = <span class="string">'all 1s ease'</span></span></span><br><span class="line">                el.style.opacity = 1.0</span><br><span class="line"><span class="actionscript">                <span class="comment">//过渡动画结束后调用afterEnter方法</span></span></span><br><span class="line"><span class="actionscript">                el.addEventListener(<span class="string">'transitionend'</span>, done);</span></span><br><span class="line">            &#125;,</span><br><span class="line">            afterEnter(el)&#123;</span><br><span class="line"><span class="actionscript">                <span class="comment">// 动画完成之后，会调用 afterEnter</span></span></span><br><span class="line"><span class="javascript">                <span class="built_in">console</span>.log(<span class="string">'ok111'</span>)</span></span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">            beforeLeave(el)&#123;</span><br><span class="line"><span class="actionscript">                <span class="comment">//el.style.opacity = 1.0</span></span></span><br><span class="line"><span class="actionscript">                el.style.transform = <span class="string">"translate(150px, 450px)"</span></span></span><br><span class="line"><span class="javascript">                <span class="built_in">console</span>.log(<span class="string">"beforeLeave"</span>)</span></span><br><span class="line">            &#125;,</span><br><span class="line">            leave(el,done)&#123;</span><br><span class="line"><span class="javascript">                <span class="built_in">console</span>.log(<span class="string">"leave"</span>)</span></span><br><span class="line">                el.offsetWidth</span><br><span class="line"><span class="actionscript">                <span class="comment">// leave 表示动画 离开 之后的样式，在这里可以设置小球完成动画之后的结束状态</span></span></span><br><span class="line"><span class="actionscript">                el.style.transition = <span class="string">'all 1s ease'</span></span></span><br><span class="line"></span><br><span class="line">                el.style.opacity = 0</span><br><span class="line"><span class="actionscript">                el.style.transform = <span class="string">"translate(0px,0px)"</span></span></span><br><span class="line"><span class="actionscript">                el.addEventListener(<span class="string">'transitionend'</span>, done);</span></span><br><span class="line">            &#125;,</span><br><span class="line">            afterLeave(el)&#123;</span><br><span class="line"><span class="actionscript">                <span class="comment">// 动画完成之后，会调用 afterEnter</span></span></span><br><span class="line"><span class="javascript">                <span class="built_in">console</span>.log(<span class="string">'ok222'</span>)</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="6-6-实现添加购物车的动画效果"><a href="#6-6-实现添加购物车的动画效果" class="headerlink" title="6.6 实现添加购物车的动画效果"></a>6.6 实现添加购物车的动画效果</h2><p>需求：在添加购物车动画执行完毕之后就立马隐藏小球</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">    &lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span><br><span class="line">    &lt;meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"ie=edge"</span>&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">    &lt;script src="./</span>lib/vue<span class="number">-2.4</span><span class="number">.0</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">    &lt;style&gt;</span></span><br><span class="line"><span class="string">        .ball &#123;</span></span><br><span class="line"><span class="string">            width: 15px;</span></span><br><span class="line"><span class="string">            height: 15px;</span></span><br><span class="line"><span class="string">            border-radius: 50%;</span></span><br><span class="line"><span class="string">            background-color: red;</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">    &lt;/style&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">&lt;div id="</span>app<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;input type="</span>button<span class="string">" value="</span>快到碗里来<span class="string">" @click="</span>flag=!flag<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;!-- 1. 使用 transition 元素把 小球包裹起来 --&gt;</span></span><br><span class="line"><span class="string">    &lt;transition</span></span><br><span class="line"><span class="string">            @before-enter="</span>beforeEnter<span class="string">"</span></span><br><span class="line"><span class="string">            @enter="</span>enter<span class="string">"</span></span><br><span class="line"><span class="string">            @after-enter="</span>afterEnter<span class="string">"&gt;</span></span><br><span class="line"><span class="string">        &lt;div class="</span>ball<span class="string">" v-show="</span>flag<span class="string">"&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">    &lt;/transition&gt;</span></span><br><span class="line"><span class="string">&lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    // 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="string">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="string">        el: '#app',</span></span><br><span class="line"><span class="string">        data: &#123;</span></span><br><span class="line"><span class="string">            flag: false</span></span><br><span class="line"><span class="string">        &#125;,</span></span><br><span class="line"><span class="string">        methods: &#123;</span></span><br><span class="line"><span class="string">            //el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象</span></span><br><span class="line"><span class="string">            beforeEnter(el)&#123;</span></span><br><span class="line"><span class="string">                // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式</span></span><br><span class="line"><span class="string">                el.style.transform = "</span>translate(<span class="number">0</span>px, <span class="number">0</span>px)<span class="string">"</span></span><br><span class="line"><span class="string">            &#125;,</span></span><br><span class="line"><span class="string">            enter(el,done)&#123;</span></span><br><span class="line"><span class="string">                //el.offsetWidth 会强制动画刷新</span></span><br><span class="line"><span class="string">                el.offsetWidth</span></span><br><span class="line"><span class="string">                // enter 表示动画 开始之后的样式，在这里可以设置小球完成动画之后的结束状态</span></span><br><span class="line"><span class="string">                el.style.transform = "</span>translate(<span class="number">150</span>px, <span class="number">450</span>px)<span class="string">"</span></span><br><span class="line"><span class="string">                el.style.transition = 'all 1s ease'</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">                el.addEventListener('transitionend', done);</span></span><br><span class="line"><span class="string">            &#125;,</span></span><br><span class="line"><span class="string">            afterEnter(el)&#123;</span></span><br><span class="line"><span class="string">                //上面使用done之后会在动画执行完了就立马隐藏小球</span></span><br><span class="line"><span class="string">                console.log('ok')</span></span><br><span class="line"><span class="string">                //解决afterEnter被触发后要过一段时间才能隐藏的问题</span></span><br><span class="line"><span class="string">                el.style.display = 'none'</span></span><br><span class="line"><span class="string">                //动画分为上半场和下半场，上半场指的是 flag :  false ---&gt; true</span></span><br><span class="line"><span class="string">                //                                        下半场指的是 flag ： true ---&gt;false</span></span><br><span class="line"><span class="string">                //这里让this.flag = !this.flag是执行下半场的动画(虽然我们没有定义过下半场动画)。如果没有这个代码，那我们点击一下按钮进行动画，再点击一下按钮进行动画就会有问题。</span></span><br><span class="line"><span class="string">                this.flag = !this.flag</span></span><br><span class="line"><span class="string">            &#125;</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">    &#125;);</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="6-7-列表动画"><a href="#6-7-列表动画" class="headerlink" title="6.7 列表动画"></a>6.7 列表动画</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">    li &#123;</span><br><span class="line"><span class="css">      <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">dashed</span> <span class="selector-id">#999</span>;</span></span><br><span class="line">      margin: 5px;</span><br><span class="line">      line-height: 35px;</span><br><span class="line">      padding-left: 5px;</span><br><span class="line">      font-size: 12px;</span><br><span class="line">      width: 100%;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line">      background-color: hotpink;</span><br><span class="line"><span class="css">      <span class="selector-tag">transition</span>: <span class="selector-tag">all</span> 0<span class="selector-class">.8s</span> <span class="selector-tag">ease</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="css">	<span class="comment">/*整个列表进入动画*/</span></span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-enter</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-leave-to</span> &#123;</span></span><br><span class="line">      opacity: 0;</span><br><span class="line">      transform: translateY(80px);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.v-enter-active</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-leave-active</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">transition</span>: <span class="selector-tag">all</span> 0<span class="selector-class">.6s</span> <span class="selector-tag">ease</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    </span><br><span class="line"><span class="css">	<span class="comment">/*transition-group 不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用*/</span></span></span><br><span class="line"><span class="css">	<span class="comment">/* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 。其原理是点击要删除的li的时候动态添加absulute样式，让其脱标，下面元素就可以顶上来了 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-move</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="comment">/*列表排序过滤*/</span></span></span><br><span class="line"><span class="css">      <span class="selector-tag">transition</span>: <span class="selector-tag">all</span> 10<span class="selector-class">.6s</span> <span class="selector-tag">ease</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.v-leave-active</span>&#123;</span></span><br><span class="line">      position: absolute;</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">        Id:</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"id"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">        Name:</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"添加"</span> @<span class="attr">click</span>=<span class="string">"add"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- &lt;ul&gt; --&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup --&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性 --&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 --&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">transition-group</span> <span class="attr">appear</span> <span class="attr">tag</span>=<span class="string">"ul"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(item, i) in list"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span> @<span class="attr">click</span>=<span class="string">"del(i)"</span>&gt;</span></span><br><span class="line">          &#123;&#123;item.id&#125;&#125; --- &#123;&#123;item.name&#125;&#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">transition-group</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;/ul&gt; --&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        id: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        name: <span class="string">''</span>,</span></span><br><span class="line">        list: [</span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">1</span>, name: <span class="string">'赵高'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">2</span>, name: <span class="string">'秦桧'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">3</span>, name: <span class="string">'严嵩'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">          &#123; id: <span class="number">4</span>, name: <span class="string">'魏忠贤'</span> &#125;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        add() &#123;</span><br><span class="line"><span class="actionscript">          <span class="comment">//this.list.push(&#123; id: this.id, name: this.name &#125;)</span></span></span><br><span class="line"><span class="actionscript">		  <span class="keyword">this</span>.list.splice(<span class="number">1</span>,<span class="number">0</span>,&#123; id: <span class="keyword">this</span>.id, name: <span class="keyword">this</span>.name &#125;)</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.id = <span class="keyword">this</span>.name = <span class="string">''</span></span></span><br><span class="line">        &#125;,</span><br><span class="line">        del(i) &#123;</span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.list.splice(i, <span class="number">1</span>)</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="6-8-相关文章"><a href="#6-8-相关文章" class="headerlink" title="6.8 相关文章"></a>6.8 相关文章</h2><ol>
<li><a href="https://v1-cn.vuejs.org/" target="_blank" rel="noopener">vue.js 1.x 文档</a></li>
<li><a href="https://cn.vuejs.org/" target="_blank" rel="noopener">vue.js 2.x 文档</a></li>
<li><a href="http://www.css88.com/archives/7715" target="_blank" rel="noopener">String.prototype.padStart(maxLength, fillString)</a></li>
<li><a href="http://www.cnblogs.com/wuhua1/p/6686237.html" target="_blank" rel="noopener">js 里面的键盘事件对应的键码</a></li>
<li><a href="http://www.cnblogs.com/kidney/p/6052935.html" target="_blank" rel="noopener">Vue.js双向绑定的实现原理</a></li>
<li><a href="https://github.com/pagekit/vue-resource" target="_blank" rel="noopener">pagekit/vue-resource</a></li>
<li><a href="https://jingyan.baidu.com/article/a65957f4976aad24e67f9b9b.html" target="_blank" rel="noopener">navicat如何导入sql文件和导出sql文件</a></li>
<li><a href="http://cubic-bezier.com/#.4,-0.3,1,.33" target="_blank" rel="noopener">贝塞尔在线生成器</a></li>
</ol>
<h1 id="7-Vue组件"><a href="#7-Vue组件" class="headerlink" title="7 Vue组件"></a>7 Vue组件</h1><p>什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；</p>
<p>组件化和模块化的不同：</p>
<ul>
<li>模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；</li>
<li>组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；</li>
</ul>
<h2 id="7-1-定义Vue组件"><a href="#7-1-定义Vue组件" class="headerlink" title="7.1 定义Vue组件"></a>7.1 定义Vue组件</h2><h3 id="7-1-2-全局组件的定义"><a href="#7-1-2-全局组件的定义" class="headerlink" title="7.1.2 全局组件的定义"></a>7.1.2 全局组件的定义</h3><h4 id="a-使用Vue-component-方法："><a href="#a-使用Vue-component-方法：" class="headerlink" title="a) 使用Vue.component 方法："></a>a) 使用Vue.component 方法：</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span><br><span class="line">  &lt;meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"ie=edge"</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">  &lt;script src="./</span>lib/vue<span class="number">-2.4</span><span class="number">.0</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">  &lt;div id="</span>app<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;!-- 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可 --&gt;</span></span><br><span class="line"><span class="string">    &lt;my-component&gt;&lt;/my-component&gt;</span></span><br><span class="line"><span class="string">  &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  &lt;script&gt;</span></span><br><span class="line"><span class="string">    Vue.component('myComponent', &#123;</span></span><br><span class="line"><span class="string">      template: '&lt;h3&gt;这是使用 Vue.extend 创建的组件3&lt;/h3&gt;'</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    // 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="string">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="string">      el: '#app',</span></span><br><span class="line"><span class="string">      data: &#123;&#125;,</span></span><br><span class="line"><span class="string">      methods: &#123;&#125;</span></span><br><span class="line"><span class="string">    &#125;);</span></span><br><span class="line"><span class="string">  &lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"># 注意：一个组件只可以有唯一的根元素</span></span><br></pre></td></tr></table></figure>

<h4 id="b-模板字符串定义组件"><a href="#b-模板字符串定义组件" class="headerlink" title="b) 模板字符串定义组件"></a>b) 模板字符串定义组件</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">mycom3</span>&gt;</span><span class="tag">&lt;/<span class="name">mycom3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h4</span>&gt;</span>好用,不错!<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    Vue.component(<span class="string">'mycom3'</span>, &#123;</span></span><br><span class="line"><span class="actionscript">      template: <span class="string">'#tmpl'</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！</p>
</blockquote>
<h3 id="7-1-2-私有组建的定义"><a href="#7-1-2-私有组建的定义" class="headerlink" title="7.1.2 私有组建的定义"></a>7.1.2 私有组建的定义</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">mycom3</span>&gt;</span><span class="tag">&lt;/<span class="name">mycom3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">login</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是私有的 login 组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm2 = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line">      filters: &#123;&#125;,</span><br><span class="line">      directives: &#123;&#125;,</span><br><span class="line"><span class="actionscript">      <span class="comment">// 定义实例内部私有组件的</span></span></span><br><span class="line">      components: &#123; </span><br><span class="line">        login: &#123;</span><br><span class="line"><span class="actionscript">          template: <span class="string">'#tmpl'</span></span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-1-3-组件中数据和事件"><a href="#7-1-3-组件中数据和事件" class="headerlink" title="7.1.3 组件中数据和事件"></a>7.1.3 组件中数据和事件</h3><h4 id="a-基本使用"><a href="#a-基本使用" class="headerlink" title="a) 基本使用"></a>a) 基本使用</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">counter</span>&gt;</span><span class="tag">&lt;/<span class="name">counter</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">counter</span>&gt;</span><span class="tag">&lt;/<span class="name">counter</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">counter</span>&gt;</span><span class="tag">&lt;/<span class="name">counter</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"+1"</span> @<span class="attr">click</span>=<span class="string">"increment"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;count&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> dataObj = &#123; count: <span class="number">0</span> &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1</span></span></span><br><span class="line"><span class="actionscript">    Vue.component(<span class="string">'counter'</span>, &#123;</span></span><br><span class="line"><span class="actionscript">      template: <span class="string">'#tmpl'</span>,</span></span><br><span class="line"><span class="actionscript">      data: <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="comment">// 在组件中最好return一个独立的对象，每当创建一个新的组件实例，每一个组件实例之间是完全独立的</span></span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> &#123; count: <span class="number">0</span> &#125;</span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        increment() &#123;</span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.count++</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="b-为什么-组件中-data-必须是函数"><a href="#b-为什么-组件中-data-必须是函数" class="headerlink" title="b) 为什么 组件中 data 必须是函数"></a>b) 为什么 组件中 data 必须是函数</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//伪代码</span></span><br><span class="line"><span class="keyword">var</span> Component = functionComponent() &#123;&#125;;</span><br><span class="line">Component.prototype.data = &#123;</span><br><span class="line">    demo: <span class="number">123</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> component1 = <span class="keyword">new</span> Component();</span><br><span class="line"><span class="keyword">var</span> component2 = <span class="keyword">new</span> Component();</span><br><span class="line">component1.data.demo = <span class="number">456</span>;</span><br><span class="line"><span class="built_in">console</span>.log(component2.data.demo); <span class="comment">// 456</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//1.从上面可以看出，两个实例都引用同一个对象，其中一个改变的时候，另一个也发生改变。</span></span><br><span class="line"><span class="comment">//2.每一个vue组件都是一个vue实例，通过new Vue()实例化，引用同一个对象，如果data直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变。</span></span><br><span class="line"><span class="comment">//3.而data是函数，并且在函数中return一个独立对象的时候，每个vue组件的data都因为函数有了自己的作用域，互不干扰。</span></span><br></pre></td></tr></table></figure>

<h2 id="7-2-切换组件"><a href="#7-2-切换组件" class="headerlink" title="7.2 切换组件"></a>7.2 切换组件</h2><h3 id="7-2-1-使用flag标识符结合v-if和v-else切换组件"><a href="#7-2-1-使用flag标识符结合v-if和v-else切换组件" class="headerlink" title="7.2.1 使用flag标识符结合v-if和v-else切换组件"></a>7.2.1 使用flag标识符结合v-if和v-else切换组件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span><br><span class="line">  &lt;meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"ie=edge"</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">  &lt;script src="./</span>lib/vue<span class="number">-2.4</span><span class="number">.0</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">  &lt;div id="</span>app<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;a href="</span><span class="string">" @click.prevent="</span>flag=<span class="literal">true</span><span class="string">"&gt;登录&lt;/a&gt;</span></span><br><span class="line"><span class="string">    &lt;a href="</span><span class="string">" @click.prevent="</span>flag=<span class="literal">false</span><span class="string">"&gt;注册&lt;/a&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    &lt;login v-if="</span>flag<span class="string">"&gt;&lt;/login&gt;</span></span><br><span class="line"><span class="string">    &lt;register v-else&gt;&lt;/register&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  &lt;script&gt;</span></span><br><span class="line"><span class="string">    Vue.component('login', &#123;</span></span><br><span class="line"><span class="string">      template: '&lt;h3&gt;登录组件&lt;/h3&gt;'</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    Vue.component('register', &#123;</span></span><br><span class="line"><span class="string">      template: '&lt;h3&gt;注册组件&lt;/h3&gt;'</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    // 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="string">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="string">      el: '#app',</span></span><br><span class="line"><span class="string">      data: &#123;</span></span><br><span class="line"><span class="string">        flag: false</span></span><br><span class="line"><span class="string">      &#125;,</span></span><br><span class="line"><span class="string">      methods: &#123;&#125;</span></span><br><span class="line"><span class="string">    &#125;);</span></span><br><span class="line"><span class="string">  &lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"># 缺点：只能切换两个组件</span></span><br></pre></td></tr></table></figure>

<h3 id="7-2-2-使用component来切换不同的子组件"><a href="#7-2-2-使用component来切换不同的子组件" class="headerlink" title="7.2.2 使用component来切换不同的子组件"></a>7.2.2 使用component来切换不同的子组件</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='login'"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='register'"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- Vue提供了 component ,来展示对应名称的组件 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"comName"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 组件名称是 字符串</span></span></span><br><span class="line"><span class="actionscript">    Vue.component(<span class="string">'login'</span>, &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>登录组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    Vue.component(<span class="string">'register'</span>, &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>注册组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        comName: <span class="string">'login'</span> <span class="comment">// 当前 component 中的 :is 绑定的组件的名称</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-2-3-keep-alive组件"><a href="#7-2-3-keep-alive组件" class="headerlink" title="7.2.3 keep-alive组件"></a>7.2.3 keep-alive组件</h3><p><keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，而不是销毁他们，防止重复渲染DOM。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='login'"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='register'"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--keep-alive 将组件缓存--&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--&lt;keep-alive&gt;</span></span><br><span class="line"><span class="comment">        &lt;component :is="comName"&gt;&lt;/component&gt;</span></span><br><span class="line"><span class="comment">    &lt;/keep-alive&gt;--&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--仅缓存login登陆组件 include后面是组件名 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--&lt;keep-alive  include="login"&gt;</span></span><br><span class="line"><span class="comment">        &lt;component :is="comName"&gt;&lt;/component&gt;</span></span><br><span class="line"><span class="comment">    &lt;/keep-alive&gt;--&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--使用正则表达式，需要使用v-bind的方式，缓存login和register组件--&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--&lt;keep-alive  :include="/login|register/"&gt;</span></span><br><span class="line"><span class="comment">        &lt;component :is="comName"&gt;&lt;/component&gt;</span></span><br><span class="line"><span class="comment">    &lt;/keep-alive&gt;--&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">keep-alive</span>  <span class="attr">:include</span>=<span class="string">"['login','register']"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"comName"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--&lt;keep-alive  exclude="login"&gt;</span></span><br><span class="line"><span class="comment">        &lt;component :is="comName"&gt;&lt;/component&gt;</span></span><br><span class="line"><span class="comment">    &lt;/keep-alive&gt;--&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 组件名称是 字符串</span></span></span><br><span class="line"><span class="actionscript">    Vue.component(<span class="string">'login'</span>, &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">        template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>登录组件<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span><span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    Vue.component(<span class="string">'register'</span>, &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">        template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>注册组件<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span><span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">        el: <span class="string">'#app'</span>,</span></span><br><span class="line">        data: &#123;</span><br><span class="line"><span class="actionscript">            comName: <span class="string">'login'</span> <span class="comment">// 当前 component 中的 :is 绑定的组件的名称</span></span></span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-2-4-组件切换动画"><a href="#7-2-4-组件切换动画" class="headerlink" title="7.2.4 组件切换动画"></a>7.2.4 组件切换动画</h3><p><a href="https://cn.vuejs.org/v2/guide/transitions.html#%E5%A4%9A%E4%B8%AA%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E6%B8%A1" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/transitions.html#%E5%A4%9A%E4%B8%AA%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E6%B8%A1</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-enter</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-leave-to</span> &#123;</span></span><br><span class="line">      opacity: 0;</span><br><span class="line">      transform: translateX(150px);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.v-enter-active</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-leave-active</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">transition</span>: <span class="selector-tag">all</span> 0<span class="selector-class">.5s</span> <span class="selector-tag">ease</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='login'"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='register'"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 通过 mode 属性,设置组件切换时候的模式,out-in 表示原先的组件先出去，后来的组件再进来 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">mode</span>=<span class="string">"out-in"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"comName"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 组件名称是 字符串</span></span></span><br><span class="line"><span class="actionscript">    Vue.component(<span class="string">'login'</span>, &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>登录组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    Vue.component(<span class="string">'register'</span>, &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>注册组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        comName: <span class="string">'login'</span> <span class="comment">// 当前 component 中的 :is 绑定的组件的名称</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="7-3-父子组件之间的通信"><a href="#7-3-父子组件之间的通信" class="headerlink" title="7.3 父子组件之间的通信"></a>7.3 父子组件之间的通信</h2><h3 id="7-3-1-父组件向子组件传值"><a href="#7-3-1-父组件向子组件传值" class="headerlink" title="7.3.1 父组件向子组件传值"></a>7.3.1 父组件向子组件传值</h3><p>使用步骤：</p>
<blockquote>
<p>1.父组件给子组件绑定数据<br><com1 v-bind:parentmsg="msg"></com1></p>
<p>2.子组件中提前声明绑定的key<br>props: [‘parentmsg’], </p>
<p>3.子组件使用props中声明的绑定的key<br>template: ‘&lt;h1 @click=”change”&gt;这是子组件 — </h1>‘</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 父组件，可以在引用子组件的时候， 通过属性绑定（v-bind:） 的形式, 把需要传递给子组件的数据以属性绑定的形式传递到子组件内部，供子组件使用 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">com1</span> <span class="attr">v-bind:parentmsg</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">com1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> @<span class="attr">click</span>=<span class="string">"change"</span>&gt;</span>这是子组件 --- &#123;&#123; parentmsg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> com1 = &#123;</span></span><br><span class="line">        data() &#123;</span><br><span class="line"><span class="actionscript">            <span class="comment">//子组件中的 data 数据，并不是通过父组件传递过来的，而是子组件自身私有的。data 上的数据，都是可读可写的</span></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">                title: <span class="string">'123'</span>,</span></span><br><span class="line"><span class="actionscript">                content: <span class="string">'qqq'</span></span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line"><span class="actionscript">        <span class="comment">//子组件默认情况下无法直接访问父组件的数据</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">//可以通过父组件向子组件传值的方式来实现访问</span></span></span><br><span class="line"><span class="actionscript">        template: <span class="string">'#tmpl'</span>,</span></span><br><span class="line"><span class="actionscript">        <span class="comment">// 注意： 组件中的所有 props 中的数据，都是通过父组件传递给子组件的。props中的数据都是只读的，无法重新赋值</span></span></span><br><span class="line"><span class="actionscript">        props: [<span class="string">'parentmsg'</span>],</span></span><br><span class="line">        methods: &#123;</span><br><span class="line">            change() &#123;</span><br><span class="line"><span class="actionscript">                <span class="keyword">this</span>.parentmsg = <span class="string">'被修改了'</span></span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">        el: <span class="string">'#app'</span>,</span></span><br><span class="line">        data: &#123;</span><br><span class="line"><span class="actionscript">            msg: <span class="string">'123 啊-父组件中的数据'</span></span></span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;&#125;,</span><br><span class="line">        components: &#123;</span><br><span class="line">            com1:com1</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意：子组件props中的数据只是从父组件传递过来，不可以在子组件中进行修改</strong></p>
<h3 id="7-3-2-子组件向父组件传值"><a href="#7-3-2-子组件向父组件传值" class="headerlink" title="7.3.2 子组件向父组件传值"></a>7.3.2 子组件向父组件传值</h3><p>原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 父组件向子组件传递方法，使用的是事件绑定机制--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">com2</span> @<span class="attr">func</span>=<span class="string">"show"</span>&gt;</span><span class="tag">&lt;/<span class="name">com2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是子组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"这是子组件中的按钮 - 点击它，触发父组件传递过来的 func 方法"</span> @<span class="attr">click</span>=<span class="string">"myclick"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 定义了一个字面量类型的组件模板对象</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> com2 = &#123;</span></span><br><span class="line"><span class="actionscript">      template: <span class="string">'#tmpl'</span>,</span></span><br><span class="line">      data() &#123;</span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">          sonmsg: &#123; name: <span class="string">'小头儿子'</span>, age: <span class="number">6</span> &#125;</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        myclick() &#123;</span><br><span class="line"><span class="actionscript">          <span class="comment">// 当点击子组件的按钮的时候，通过emit触发父组件传递过来的方法。emit 英文原意： 是触发，调用、发射的意思</span></span></span><br><span class="line"><span class="actionscript">          <span class="comment">// 这边的func为父组件中绑定事件的key</span></span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.$emit(<span class="string">'func'</span>, <span class="keyword">this</span>.sonmsg)</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        datamsgFormSon: <span class="literal">null</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        show(data) &#123;</span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.datamsgFormSon = data</span></span><br><span class="line"><span class="javascript">		  <span class="built_in">console</span>.log(<span class="keyword">this</span>.datamsgFormSon);</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line"></span><br><span class="line">      components: &#123;</span><br><span class="line">        com2: com2</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">#上面代码也可以简写</span><br><span class="line">#1.子组件</span><br><span class="line">&lt;input type=<span class="string">"button"</span> value=<span class="string">"这是子组件中的按钮 - 点击它，触发父组件传递过来的 func 方法"</span> @click=<span class="string">"$emit('func', this.sonmsg)"</span>&gt;</span><br><span class="line"></span><br><span class="line">#2.父组件</span><br><span class="line">&lt;com2 @func=<span class="string">"show"</span>&gt;&lt;<span class="regexp">/com2&gt;</span></span><br><span class="line"><span class="regexp">show(data) &#123;</span></span><br><span class="line"><span class="regexp">    console.log(data);</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-3-3-this-refs-获取元素和组件"><a href="#7-3-3-this-refs-获取元素和组件" class="headerlink" title="7.3.3  this.$refs 获取元素和组件"></a>7.3.3  this.$refs 获取元素和组件</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"获取元素"</span> @<span class="attr">click</span>=<span class="string">"getElement"</span> <span class="attr">ref</span>=<span class="string">"mybtn"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">id</span>=<span class="string">"myh3"</span> <span class="attr">ref</span>=<span class="string">"myh3"</span>&gt;</span>哈哈哈， 今天天气太好了！！！<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">login</span> <span class="attr">ref</span>=<span class="string">"mylogin"</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>登录组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>',</span></span></span><br><span class="line">      data() &#123;</span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">          msg: <span class="string">'son msg'</span></span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        show() &#123;</span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">'调用了子组件的方法'</span>)</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        getElement() &#123;</span><br><span class="line"><span class="actionscript">		  <span class="comment">// 在vue中不再推荐使用dom操作获取元素了，我们可以使用ref来替换</span></span></span><br><span class="line"><span class="actionscript">          <span class="comment">// console.log(document.getElementById('myh3').innerText)</span></span></span><br><span class="line">          </span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="keyword">this</span>.$refs.myh3.innerText)</span></span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="keyword">this</span>.$refs.mylogin.msg)</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.$refs.mylogin.show()</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      components: &#123;</span><br><span class="line">        login</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-3-4-评论列表案例"><a href="#7-3-4-评论列表案例" class="headerlink" title="7.3.4 评论列表案例"></a>7.3.4 评论列表案例</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"./lib/bootstrap-3.3.7.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">	 <span class="comment">&lt;!--使用自定义组件--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">cmt-box</span> @<span class="attr">func</span>=<span class="string">"loadComments"</span>&gt;</span><span class="tag">&lt;/<span class="name">cmt-box</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"list-group"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"list-group-item"</span> <span class="attr">v-for</span>=<span class="string">"item in list"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"badge"</span>&gt;</span>评论人： &#123;&#123; item.user &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        &#123;&#123; item.content &#125;&#125;</span><br><span class="line">      <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!--定义字符串模板--&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>评论人：<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">v-model</span>=<span class="string">"user"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>评论内容：<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">v-model</span>=<span class="string">"content"</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"发表评论"</span> <span class="attr">class</span>=<span class="string">"btn btn-primary"</span> @<span class="attr">click</span>=<span class="string">"postComment"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">//自定义组件</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> commentBox = &#123;</span></span><br><span class="line">      data() &#123;</span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">          user: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">          content: <span class="string">''</span></span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line"><span class="actionscript">      template: <span class="string">'#tmpl'</span>,</span></span><br><span class="line">      methods: &#123;</span><br><span class="line"><span class="actionscript">	    <span class="comment">// 发表评论的方法</span></span></span><br><span class="line">        postComment() &#123; </span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> comment = &#123; <span class="attr">id</span>: <span class="built_in">Date</span>.now(), <span class="attr">user</span>: <span class="keyword">this</span>.user, <span class="attr">content</span>: <span class="keyword">this</span>.content &#125;</span></span><br><span class="line"><span class="actionscript">          <span class="comment">// 从 localStorage 中获取所有的评论</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> list = <span class="built_in">JSON</span>.parse(localStorage.getItem(<span class="string">'cmts'</span>) || <span class="string">'[]'</span>)</span></span><br><span class="line"><span class="actionscript">		  <span class="comment">// 添加评论</span></span></span><br><span class="line">          list.unshift(comment)</span><br><span class="line"><span class="actionscript">          <span class="comment">// 重新保存最新的评论数据</span></span></span><br><span class="line"><span class="javascript">          localStorage.setItem(<span class="string">'cmts'</span>, <span class="built_in">JSON</span>.stringify(list))</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.user = <span class="keyword">this</span>.content = <span class="string">''</span></span></span><br><span class="line"><span class="actionscript">          <span class="comment">// 触发父组件传递过来的方法</span></span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.$emit(<span class="string">'func'</span>)</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line">        list: [</span><br><span class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="built_in">Date</span>.now(), <span class="attr">user</span>: <span class="string">'李白'</span>, <span class="attr">content</span>: <span class="string">'天生我材必有用'</span> &#125;,</span></span><br><span class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="built_in">Date</span>.now(), <span class="attr">user</span>: <span class="string">'江小白'</span>, <span class="attr">content</span>: <span class="string">'劝君更尽一杯酒'</span> &#125;,</span></span><br><span class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="built_in">Date</span>.now(), <span class="attr">user</span>: <span class="string">'小马'</span>, <span class="attr">content</span>: <span class="string">'我姓马， 风吹草低见牛羊的马'</span> &#125;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      beforeCreate()&#123; </span><br><span class="line"></span><br><span class="line">      &#125;,</span><br><span class="line">      created()&#123;</span><br><span class="line"><span class="actionscript">		<span class="comment">//调用loadComments方法初始化</span></span></span><br><span class="line"><span class="actionscript">        <span class="keyword">this</span>.loadComments()</span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line"><span class="actionscript">	    <span class="comment">//加载评论的方法</span></span></span><br><span class="line">        loadComments() &#123; </span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> list = <span class="built_in">JSON</span>.parse(localStorage.getItem(<span class="string">'cmts'</span>) || <span class="string">'[]'</span>)</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.list = list</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line"><span class="actionscript">	  <span class="comment">//自定义组件</span></span></span><br><span class="line">      components: &#123;</span><br><span class="line"><span class="actionscript">        <span class="string">'cmt-box'</span>: commentBox</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="7-4-中央事件总线的使用"><a href="#7-4-中央事件总线的使用" class="headerlink" title="7.4 中央事件总线的使用"></a>7.4 中央事件总线的使用</h2><p><strong>中央事件总线</strong> - 就是一个名字可以叫做<strong>Bus的vue空实例</strong>,里边没有任何内容。</p>
<p>它就像一个公交车一样，来回输送人，将组件A输送到组件B，再将组件B输送到组件A；</p>
<p>这里A，B组件可以是父、子组件，也可以是兄、弟组件，或者两个没有任何关系的组件；</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.创建中央事件总线</span></span><br><span class="line"><span class="keyword">var</span> bus = <span class="keyword">new</span> Vue();</span><br><span class="line"></span><br><span class="line"><span class="comment">//2.使用Bus中央事件总线在A组件中发送信息</span></span><br><span class="line">Bus.$emit(<span class="string">'自定义事件名'</span>，<span class="string">'$on发送过来的数据'</span>)；</span><br><span class="line"></span><br><span class="line"><span class="comment">//3.使用Bus中央事件总线在B组件中接收信息</span></span><br><span class="line">Bus.$on(<span class="string">'自定义事件名'</span>，<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">     <span class="comment">//然后执行什么你自己懂的。。。</span></span><br><span class="line">&#125;)；</span><br></pre></td></tr></table></figure>

<p><img src="E:/%E5%89%8D%E7%AB%AF%E7%BA%BF%E4%B8%8A%E6%8E%88%E8%AF%BE/vue.js/3.4/readme/assets/aa.png" alt="aa"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">com1</span>&gt;</span><span class="tag">&lt;/<span class="name">com1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">com2</span>&gt;</span><span class="tag">&lt;/<span class="name">com2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl1"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是子组件1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"sendMessage"</span>&gt;</span>向组件2发送数据<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl2"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是子组件2<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123; fromComponentAMsg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">//创建中央事件总线</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> Bus = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">        name: <span class="string">'bus'</span>,</span></span><br><span class="line">        data () &#123;</span><br><span class="line"><span class="actionscript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">                <span class="comment">// code</span></span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 定义了一个字面量类型的组件模板对象</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> com1 = &#123;</span></span><br><span class="line"><span class="actionscript">        template: <span class="string">'#tmpl1'</span>,</span></span><br><span class="line">        data() &#123;</span><br><span class="line"><span class="actionscript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line">            sendMessage() &#123;</span><br><span class="line"><span class="actionscript">                Bus.$emit(<span class="string">'inceptMessage'</span>, <span class="string">"组件B，你好"</span>)</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 定义了一个字面量类型的组件模板对象</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> com2 = &#123;</span></span><br><span class="line"><span class="actionscript">        template: <span class="string">'#tmpl2'</span>,</span></span><br><span class="line">        data() &#123;</span><br><span class="line"><span class="actionscript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">                fromComponentAMsg:<span class="string">''</span></span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line">        &#125;,</span><br><span class="line">        created () &#123;</span><br><span class="line"><span class="actionscript">            Bus.$on(<span class="string">'inceptMessage'</span>,(msg) =&gt; &#123;</span></span><br><span class="line"><span class="actionscript">                <span class="keyword">this</span>.fromComponentAMsg = msg</span></span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">        el: <span class="string">'#app'</span>,</span></span><br><span class="line">        data: &#123;</span><br><span class="line"></span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line"></span><br><span class="line">        &#125;,</span><br><span class="line">        components: &#123;</span><br><span class="line">            com1:com1,</span><br><span class="line">            com2: com2</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="7-5-插槽-slot"><a href="#7-5-插槽-slot" class="headerlink" title="7.5 插槽 slot"></a>7.5 插槽 slot</h2><p>插槽使用场景是：子组件需要显示的内容并非来自本身而是父组件动态传递进来的，插槽的内容具体是什么是由父视图在调用的时候决定的 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span><br><span class="line">  &lt;meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"ie=edge"</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">  &lt;script src="./</span>lib/vue<span class="number">-2.4</span><span class="number">.0</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">  &lt;div id="</span>app<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;com2&gt;</span></span><br><span class="line"><span class="string">            &lt;!--使用插槽--&gt;</span></span><br><span class="line"><span class="string">            &lt;h1 slot="</span>header<span class="string">"&gt;顶部&lt;/h1&gt;</span></span><br><span class="line"><span class="string">      		&lt;h1 slot="</span>footer<span class="string">"&gt;底部&lt;/h1&gt;</span></span><br><span class="line"><span class="string">      &lt;/com2&gt;</span></span><br><span class="line"><span class="string">  &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  &lt;template id="</span>tmpl<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">      &lt;h1&gt;这是子组件&lt;/h1&gt;</span></span><br><span class="line"><span class="string">      &lt;!--声明插槽--&gt;</span></span><br><span class="line"><span class="string">      &lt;header&gt;</span></span><br><span class="line"><span class="string">     	 &lt;slot name="</span>header<span class="string">"&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">  	  &lt;/header&gt;</span></span><br><span class="line"><span class="string">      &lt;footer&gt;</span></span><br><span class="line"><span class="string">     	 &lt;slot name="</span>footer<span class="string">"&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">      &lt;/footer&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">  &lt;/template&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    </span></span><br><span class="line"><span class="string">  &lt;script&gt;</span></span><br><span class="line"><span class="string">    // 定义了一个字面量类型的组件模板对象</span></span><br><span class="line"><span class="string">    var com2 = &#123;</span></span><br><span class="line"><span class="string">      template: '#tmpl',</span></span><br><span class="line"><span class="string">      data() &#123;</span></span><br><span class="line"><span class="string">        return &#123;</span></span><br><span class="line"><span class="string">          </span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">      &#125;,</span></span><br><span class="line"><span class="string">      methods: &#123;</span></span><br><span class="line"><span class="string">       </span></span><br><span class="line"><span class="string">      &#125;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    // 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="string">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="string">      el: '#app',</span></span><br><span class="line"><span class="string">      data: &#123;</span></span><br><span class="line"><span class="string">      &#125;,</span></span><br><span class="line"><span class="string">      methods: &#123;</span></span><br><span class="line"><span class="string">      &#125;,</span></span><br><span class="line"><span class="string">      components: &#123;</span></span><br><span class="line"><span class="string">        com2: com2</span></span><br><span class="line"><span class="string">      &#125;</span></span><br><span class="line"><span class="string">    &#125;);</span></span><br><span class="line"><span class="string">  &lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="7-6-Render方法渲染组件"><a href="#7-6-Render方法渲染组件" class="headerlink" title="7.6 Render方法渲染组件"></a>7.6 Render方法渲染组件</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span><br><span class="line">  &lt;meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"ie=edge"</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">  &lt;script src="./</span>lib/vue<span class="number">-2.4</span><span class="number">.0</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">  &lt;div id="</span>app<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;p&gt;444444&lt;/p&gt;</span></span><br><span class="line"><span class="string">  &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  &lt;script&gt;</span></span><br><span class="line"><span class="string">    var login = &#123;</span></span><br><span class="line"><span class="string">      template: '&lt;h1&gt;这是登录组件&lt;/h1&gt;'</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    // 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="string">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="string">      el: '#app',</span></span><br><span class="line"><span class="string">      data: &#123;&#125;,</span></span><br><span class="line"><span class="string">      methods: &#123;&#125;,</span></span><br><span class="line"><span class="string">      // createElements 是一个方法，调用它能够把指定的组件模板渲染为html结构</span></span><br><span class="line"><span class="string">      render: function (createElements) &#123; </span></span><br><span class="line"><span class="string">        return createElements(login);</span></span><br><span class="line"><span class="string">        // 注意：这里 return 的结果，会替换页面中el指定的那个容器</span></span><br><span class="line"><span class="string">      &#125;</span></span><br><span class="line"><span class="string">    &#125;);</span></span><br><span class="line"><span class="string">  &lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"># 在一个el中，render只能渲染一个组件，这个组件会完全替换整个el</span></span><br></pre></td></tr></table></figure>

<h1 id="8-Vue路由"><a href="#8-Vue路由" class="headerlink" title="8.Vue路由"></a>8.Vue路由</h1><h2 id="8-1-什么是路由"><a href="#8-1-什么是路由" class="headerlink" title="8.1 什么是路由"></a>8.1 什么是路由</h2><ol>
<li><p>对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">A : http:<span class="comment">//127.0.0.1:5500/12.路由的使用.html/register</span></span><br><span class="line">B : http:<span class="comment">//127.0.0.1:5500/12.路由的使用.html/login</span></span><br><span class="line"></span><br><span class="line">app.get(<span class="string">"/login"</span>,(req,res)=&gt;&#123;&#125;)</span><br><span class="line">app.get(<span class="string">"/register"</span>,(req,res)=&gt;&#123;&#125;)</span><br><span class="line"></span><br><span class="line">当我们的网址由A到B的时候，此时会向服务器发送请求(也就是此时服务器要处理login请求)</span><br></pre></td></tr></table></figure>
</li>
<li><p>对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时hash有一个特点，<strong>HTTP请求中不会包含hash相关的内容</strong>；</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">A : http:<span class="comment">//127.0.0.1:5500/12.路由的使用.html#/register</span></span><br><span class="line">B : http:<span class="comment">//127.0.0.1:5500/12.路由的使用.html#/login</span></span><br><span class="line"></span><br><span class="line">当我们的网址由A到B的时候，此时网址中变化是#后面的内容，此时不会向服务器发送请求。这种方式我们称为前端路由。</span><br><span class="line">当我们由#/register切换到#/login变化的是：当前的路由地址所对应的组件信息</span><br></pre></td></tr></table></figure>
</li>
<li><p>在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；</p>
</li>
</ol>
<h2 id="8-2-前端路由案例"><a href="#8-2-前端路由案例" class="headerlink" title="8.2  前端路由案例"></a>8.2  前端路由案例</h2><h3 id="8-2-1-路由使用步骤"><a href="#8-2-1-路由使用步骤" class="headerlink" title="8.2.1 路由使用步骤"></a>8.2.1 路由使用步骤</h3><p><a href="https://router.vuejs.org/zh/installation.html" target="_blank" rel="noopener">https://router.vuejs.org/zh/installation.html</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">#1.导入 vue-router 组件类库：</span><br><span class="line">&lt;script src=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script src="./</span>lib/vue-router<span class="number">-3.0</span><span class="number">.1</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">#2.使用 router-link 组件来导航</span></span><br><span class="line"><span class="string">&lt;router-link to="</span>/login<span class="string">"&gt;登录&lt;/router-link&gt;</span></span><br><span class="line"><span class="string">&lt;router-link to="</span>/register<span class="string">"&gt;注册&lt;/router-link&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">#3.使用 router-view 组件来显示匹配到的组件</span></span><br><span class="line"><span class="string">&lt;router-view&gt;&lt;/router-view&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">#4.创建使用Vue.extend创建组件</span></span><br><span class="line"><span class="string">var login = Vue.extend(&#123;</span></span><br><span class="line"><span class="string">    template: '&lt;h1&gt;登录组件&lt;/h1&gt;'</span></span><br><span class="line"><span class="string">&#125;);</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">var register = Vue.extend(&#123;</span></span><br><span class="line"><span class="string">    template: '&lt;h1&gt;注册组件&lt;/h1&gt;'</span></span><br><span class="line"><span class="string">&#125;);</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">#5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则</span></span><br><span class="line"><span class="string">var router = new VueRouter(&#123;</span></span><br><span class="line"><span class="string">    routes: [</span></span><br><span class="line"><span class="string">        &#123; path: '/login', component: login &#125;,</span></span><br><span class="line"><span class="string">        &#123; path: '/register', component: register &#125;</span></span><br><span class="line"><span class="string">    ]</span></span><br><span class="line"><span class="string">&#125;);</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">#6.挂载路由</span></span><br><span class="line"><span class="string">var vm = new Vue(&#123;</span></span><br><span class="line"><span class="string">    el: '#app',</span></span><br><span class="line"><span class="string">    router: router // 使用 router 属性来使用路由规则</span></span><br><span class="line"><span class="string">&#125;);</span></span><br></pre></td></tr></table></figure>

<h3 id="8-2-2-路由案例"><a href="#8-2-2-路由案例" class="headerlink" title="8.2.2 路由案例"></a>8.2.2 路由案例</h3><p>当切换登陆和注册的时候，可以发现url后面#/login和#/register在切换</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1. 安装 vue-router 路由模块 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-router-3.0.1.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.router-link-active</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-class">.myactive</span> &#123;</span></span><br><span class="line">      color: red;</span><br><span class="line">      font-weight: 800;</span><br><span class="line">      font-style: italic;</span><br><span class="line">      font-size: 80px;</span><br><span class="line">      text-decoration: underline;</span><br><span class="line">      background-color: green;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.v-enter</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-leave-to</span> &#123;</span></span><br><span class="line">      opacity: 0;</span><br><span class="line">      transform: translateX(140px);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.v-enter-active</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-leave-active</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">transition</span>: <span class="selector-tag">all</span> 0<span class="selector-class">.5s</span> <span class="selector-tag">ease</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- &lt;a href="#/login"&gt;登录&lt;/a&gt; --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;a href="#/register"&gt;注册&lt;/a&gt; --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- router-link 默认渲染为一个a 标签 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login"</span> <span class="attr">tag</span>=<span class="string">"span"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/register"</span> <span class="attr">tag</span>=<span class="string">"a"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 这是 vue-router 提供的元素专门用来当作占位符的，将来路由规则匹配到的组件，就会展示到这个 router-view 中去 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 所以： 我们可以把 router-view 认为是一个占位符 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">mode</span>=<span class="string">"out-in"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 组件的模板对象</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>登录组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> register = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>注册组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">   <span class="comment">// 2. 创建一个路由对象，当导入vue-router包之后，在window全局对象中就有了一个路由的构造函数叫做VueRouter</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> routerObj = <span class="keyword">new</span> VueRouter(&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 路由匹配规则</span></span></span><br><span class="line">      routes: [  </span><br><span class="line"><span class="actionscript">        <span class="comment">//  每个路由规则都是一个对象，这个规则对象有两个必须的属性：</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">//  属性1 是 path，表示监听哪个路由链接地址</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">//  属性2 是 component，表示如果路由是前面匹配到的 path，则展示component对应的那个组件</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">//  注意： component的属性值，必须是一个组件的模板对象，不能是组件的引用名称       </span></span></span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/login'</span>, component: login &#125;,</span></span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/register'</span>, component: register &#125;,</span></span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/'</span>, redirect: <span class="string">'/register'</span> &#125;   <span class="comment">//当访问根路径的时候重定向到/register路径</span></span></span><br><span class="line">      ],</span><br><span class="line"><span class="actionscript">      <span class="comment">//https://router.vuejs.org/zh/api/#tag</span></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//设定路由激活的选项的样式</span></span></span><br><span class="line"><span class="actionscript">      linkActiveClass: <span class="string">'myactive'</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line"><span class="actionscript">      router: routerObj <span class="comment">// 将路由规则对象，注册到 vm 实例上，用来监听URL地址的变化，然后展示对应的组件</span></span></span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="8-3-路由导航模式"><a href="#8-3-路由导航模式" class="headerlink" title="8.3 路由导航模式"></a>8.3 路由导航模式</h2><p>在vue-router中有mode这样一个参数，这个参数的可选值有”hash”、 “history”、”abstract”，主要使用hash和history两种。vue中默认是hash模式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> routerObj = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">    mode: <span class="string">'hash'</span>,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="8-3-1-hash模式"><a href="#8-3-1-hash模式" class="headerlink" title="8.3.1 hash模式"></a>8.3.1 hash模式</h3><p>mode:”hash”        <a href="http://127.0.0.1:5500/06.路由模式.html#/login" target="_blank" rel="noopener">http://127.0.0.1:5500/06.路由模式.html#/login</a></p>
<p>在vue-router.js的2.8版本之前，在路由的hash部分发生了任何变化，都会执行window.onhashchange方法，在这个方法内部我们可以根据当前匹配到的hash去加载对应的组件</p>
<p>在vue-router.js的2.8版本之后，内部使用window.history.pushState来完成相应的功能</p>
<p>hash模式的特点：在切换路由的时候，不会向服务器发送请求，但是刷新网页的时候，此时会向服务器发送请求，在向服务器发送请求的时候，hash部分的信息是不会发送到服务器的，所以此时刷新网页没有问题</p>
<p>更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来，后来人们给它起了一个霸气的名字叫前端路由，成为了单页应用标配。</p>
<h3 id="8-3-2-history模式"><a href="#8-3-2-history模式" class="headerlink" title="8.3.2 history模式"></a>8.3.2 history模式</h3><p>mode:”history”     <a href="http://127.0.0.1:5500/login" target="_blank" rel="noopener">http://127.0.0.1:5500/login</a><br>内部使用window.history.pushState来处理url的变化，切换对应的组件</p>
<p>history模式的特点：在切换路由的时候，不会向服务器发送请求，但是当刷新网页的时候，此时会向服务器发送请求，如果后端没有对应的接口与此匹配，此时会报资源找不到的错误<br>history模式一般情况下不能刷新网页</p>
<h2 id="8-4-路由元数据-meta-的使用"><a href="#8-4-路由元数据-meta-的使用" class="headerlink" title="8.4 路由元数据(meta)的使用"></a>8.4 路由元数据(meta)的使用</h2><p>meta字段（元数据），直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，供页面组件或者路由钩子函数中使用。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">    &lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span><br><span class="line">    &lt;meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"ie=edge"</span>&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">    &lt;script src="./</span>lib/vue<span class="number">-2.4</span><span class="number">.0</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">    &lt;script src="</span>./lib/vue-router<span class="number">-3.0</span><span class="number">.1</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">&lt;div id="</span>app<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;router-link to="</span>/login<span class="string">"&gt;登录&lt;/router-link&gt;</span></span><br><span class="line"><span class="string">        &lt;router-link to="</span>/register<span class="string">"&gt;注册&lt;/router-link&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        &lt;keep-alive&gt;</span></span><br><span class="line"><span class="string">            &lt;router-view v-if="</span>$route.meta.cache<span class="string">"&gt;&lt;/router-view&gt;</span></span><br><span class="line"><span class="string">        &lt;/keep-alive&gt;</span></span><br><span class="line"><span class="string">        &lt;!-- 不缓存 --&gt;</span></span><br><span class="line"><span class="string">        &lt;router-view v-if="</span>!$route.meta.cache<span class="string">"&gt;&lt;/router-view&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script&gt;</span></span><br><span class="line"><span class="string">    var login = &#123;</span></span><br><span class="line"><span class="string">        template: '&lt;h3&gt;登录&lt;input type="</span>text<span class="string">"&gt;&lt;/h3&gt;'</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    var register = &#123;</span></span><br><span class="line"><span class="string">        template: '&lt;h3&gt;注册&lt;input type="</span>text<span class="string">"&gt;&lt;/h3&gt;'</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    var router = new VueRouter(&#123;</span></span><br><span class="line"><span class="string">        routes: [</span></span><br><span class="line"><span class="string">            &#123;   path: '/login',</span></span><br><span class="line"><span class="string">                component: login ,</span></span><br><span class="line"><span class="string">                meta: &#123;</span></span><br><span class="line"><span class="string">                    cache: false</span></span><br><span class="line"><span class="string">                &#125;</span></span><br><span class="line"><span class="string">            &#125;,</span></span><br><span class="line"><span class="string">            &#123;   path: '/register',</span></span><br><span class="line"><span class="string">                component: register,</span></span><br><span class="line"><span class="string">                meta: &#123;</span></span><br><span class="line"><span class="string">                    cache: true</span></span><br><span class="line"><span class="string">                &#125;</span></span><br><span class="line"><span class="string">            &#125;</span></span><br><span class="line"><span class="string">        ]</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    // 创建Vue实例得到ViewModel</span></span><br><span class="line"><span class="string">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="string">        el: '#app',</span></span><br><span class="line"><span class="string">        data: &#123;&#125;,</span></span><br><span class="line"><span class="string">        methods: &#123;&#125;,</span></span><br><span class="line"><span class="string">        router</span></span><br><span class="line"><span class="string">    &#125;);</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="8-5-路由参数的传递"><a href="#8-5-路由参数的传递" class="headerlink" title="8.5 路由参数的传递"></a>8.5 路由参数的传递</h2><h3 id="8-5-1-URL传参"><a href="#8-5-1-URL传参" class="headerlink" title="8.5.1 URL传参"></a>8.5.1 URL传参</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-router-3.0.1.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 如果在路由中，使用查询字符串给路由传递参数，则不需要修改路由规则的path属性 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login?id=10&amp;name=zs"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 也可以这样使用，注意to前面的冒号 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"&#123;path:'login',query:&#123;name:'zs',id:20&#125;&#125;"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/register"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>登录 --- </span><span class="template-variable">&#123;&#123; $route.query.id &#125;&#125;</span><span class="xml"> --- </span><span class="template-variable">&#123;&#123; $route.query.name &#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span>',</span></span></span><br><span class="line">      data()&#123;</span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">          msg: <span class="string">'123'</span></span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      created()&#123; </span><br><span class="line"><span class="actionscript">		<span class="comment">// created()中就可以获取url中的参数信息了</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">// console.log(this.$route)</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">// console.log(this.$route.query.id)</span></span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> register = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></span><br><span class="line">      routes: [</span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/login'</span>, component: login &#125;,</span></span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/register'</span>, component: register &#125;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建Vue实例，得到ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line">      router</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="8-5-2-Params方式传参"><a href="#8-5-2-Params方式传参" class="headerlink" title="8.5.2 Params方式传参"></a>8.5.2 Params方式传参</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-router-3.0.1.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login/12/ls"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/register"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>登录 --- </span><span class="template-variable">&#123;&#123; $route.params.id &#125;&#125;</span><span class="xml"> --- </span><span class="template-variable">&#123;&#123; $route.params.name &#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span>',</span></span></span><br><span class="line">      data()&#123;</span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">          msg: <span class="string">'123'</span></span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      created()&#123; </span><br><span class="line"><span class="actionscript">	    <span class="comment">// 组件的生命周期钩子函数</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.$route.params.id)</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> register = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></span><br><span class="line">      routes: [</span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/login/:id/:name'</span>, component: login &#125;,</span></span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/register'</span>, component: register &#125;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建Vue实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line">      router: router</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="8-6-路由的导航钩子函数"><a href="#8-6-路由的导航钩子函数" class="headerlink" title="8.6 路由的导航钩子函数"></a>8.6 路由的导航钩子函数</h2><p>路由钩子函数：在路由切换的不同阶段调用不同的节点函数，路由钩子函数主要用来拦截导航，让它完成跳转或取消。</p>
<p>有三种方式设置路由的导航钩子函数</p>
<blockquote>
<ol>
<li>全局的</li>
<li>单个路由独享的</li>
<li>组件级的</li>
</ol>
</blockquote>
<h3 id="8-6-1-组件级钩子函数"><a href="#8-6-1-组件级钩子函数" class="headerlink" title="8.6.1 组件级钩子函数"></a>8.6.1 组件级钩子函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//路由组件 复用  '路由参数传递'  中的代码</span></span><br><span class="line"><span class="keyword">var</span> login = &#123;</span><br><span class="line">    template: <span class="string">'&lt;h1&gt;登录 --- &#123;&#123; $route.params.id &#125;&#125; --- &#123;&#123; $route.params.name &#125;&#125;&lt;/h1&gt;'</span>,</span><br><span class="line">    data()&#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            msg: <span class="string">'123'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    created()&#123;</span><br><span class="line">        <span class="comment">// 组件的生命周期钩子函数</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.$route.params.id)</span><br><span class="line">    &#125;,</span><br><span class="line">    beforeRouteEnter (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">        <span class="comment">// 在渲染该组件的对应路由被 confirm 前调用</span></span><br><span class="line">        <span class="comment">// 不能获取组件实例 `this`, 因为当钩子执行前，组件实例还没被创建</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"login路由进入之前"</span>)</span><br><span class="line">        next()</span><br><span class="line">    &#125;,</span><br><span class="line">    beforeRouteUpdate (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">        <span class="comment">// 在当前路由改变，但是该组件被复用时调用</span></span><br><span class="line">        <span class="comment">// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，</span></span><br><span class="line">        <span class="comment">// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。</span></span><br><span class="line">        <span class="comment">// 可以访问组件实例 `this`</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"login组件被复用"</span>)</span><br><span class="line">        next()</span><br><span class="line">    &#125;,</span><br><span class="line">    beforeRouteLeave (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">        <span class="comment">// 导航离开该组件的对应路由时调用</span></span><br><span class="line">        <span class="comment">// 可以访问组件实例 `this`</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"login组件离开之前"</span>)</span><br><span class="line">        next()</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的）</span></span><br><span class="line"><span class="comment">next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会被重置到 from 路由对应的地址</span></span><br><span class="line"><span class="comment">next(‘/’) 和 next(&#123;path: ‘/’&#125;)：在中断掉当前导航的同时，跳转到一个不同的地址</span></span><br><span class="line"><span class="comment">next(error)：如果传入参数是一个 Error 实例，那么导航被终止的同时会将错误传递给 router.onError() 注册过的回调</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">    </span><br><span class="line">&lt;div id=<span class="string">"app"</span>&gt;</span><br><span class="line">    &lt;router-link to=<span class="string">"/login/12/ls"</span>&gt;登录&lt;<span class="regexp">/router-link&gt;</span></span><br><span class="line"><span class="regexp">    &lt;router-link to="/</span>login/<span class="number">12</span>/ls2<span class="string">"&gt;登录2&lt;/router-link&gt;</span></span><br><span class="line"><span class="string">    &lt;router-link to="</span>/register<span class="string">"&gt;注册&lt;/router-link&gt;</span></span><br><span class="line"><span class="string">    &lt;router-view&gt;&lt;/router-view&gt;</span></span><br><span class="line"><span class="string">&lt;/div&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="8-6-2-全局路由钩子函数"><a href="#8-6-2-全局路由钩子函数" class="headerlink" title="8.6.2 全局路由钩子函数"></a>8.6.2 全局路由钩子函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//你可以使用 router.beforeEach 注册一个全局前置守卫(进来之前的守卫)：</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123; ... &#125;)</span><br><span class="line">router.beforeEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">    </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//同样可以注册一个全局的 after 钩子(后置守卫)，不过它不像 before 钩子那样，after 钩子没有 next 方法，不能改变导航</span></span><br><span class="line">router.afterEach(<span class="function">(<span class="params">to, <span class="keyword">from</span></span>) =&gt;</span> &#123;</span><br><span class="line">  </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="8-6-3-某个路由独享的钩子"><a href="#8-6-3-某个路由独享的钩子" class="headerlink" title="8.6.3 某个路由独享的钩子"></a>8.6.3 某个路由独享的钩子</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">    routes: [</span><br><span class="line">        &#123;   <span class="attr">path</span>: <span class="string">'/login/:id/:name'</span>,</span><br><span class="line">         component: login ,</span><br><span class="line">         beforeEnter: <span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">             <span class="built_in">console</span>.log(<span class="string">"login的beforeEnter"</span>)</span><br><span class="line">             next()</span><br><span class="line">         &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123; <span class="attr">path</span>: <span class="string">'/register'</span>, <span class="attr">component</span>: register &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="8-6-4-路由钩子的应用场景"><a href="#8-6-4-路由钩子的应用场景" class="headerlink" title="8.6.4 路由钩子的应用场景"></a>8.6.4 路由钩子的应用场景</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.清除当前组件中的定时器</span></span><br><span class="line">beforeRouteLeave (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">    <span class="built_in">window</span>.clearInterval(<span class="keyword">this</span>.timer) <span class="comment">//清除定时器</span></span><br><span class="line">    next()</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//2.当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转</span></span><br><span class="line">beforeRouteLeave (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">    <span class="comment">//判断是否弹出框的状态和保存信息与否</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.dialogVisibility === <span class="literal">true</span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.dialogVisibility = <span class="literal">false</span> <span class="comment">//关闭弹出框</span></span><br><span class="line">        next(<span class="literal">false</span>) <span class="comment">//回到当前页面, 阻止页面跳转</span></span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(<span class="keyword">this</span>.saveMessage === <span class="literal">false</span>) &#123;</span><br><span class="line">        <span class="comment">//弹出警告</span></span><br><span class="line">        next(<span class="literal">false</span>) <span class="comment">//回到当前页面, 阻止页面跳转</span></span><br><span class="line">    &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">        next() <span class="comment">//否则允许跳转</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//3.保存相关内容到Vuex中或Session中</span></span><br><span class="line">beforeRouteLeave (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">    localStorage.setItem(name, content); <span class="comment">//保存到localStorage中</span></span><br><span class="line">    next()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="8-6-5-路由导航的解析流程"><a href="#8-6-5-路由导航的解析流程" class="headerlink" title="8.6.5 路由导航的解析流程"></a>8.6.5 路由导航的解析流程</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">当由A路由 --&gt; B路由的时候：</span><br><span class="line">1、在A组件里调用离开守卫。          A组件中的  beforeRouteLeave </span><br><span class="line">2、调用全局的 beforeEach 守卫。    router.beforeEach</span><br><span class="line">3、再执行B路由配置里调用 beforeEnter。</span><br><span class="line">      routes: [</span><br><span class="line">        &#123;</span><br><span class="line">          path: &#39;&#x2F;b&#39;,</span><br><span class="line">          component: B,</span><br><span class="line">          beforeEnter: (to, from, next) &#x3D;&gt; &#123;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">4、再执行B组件的进入守卫。          B组件中 beforeRouteEnter。</span><br><span class="line">5、调用全局的 beforeResole 守卫 (2.5+)。    router.beforeResolve</span><br><span class="line">6、导航被确认。</span><br><span class="line">7、调用全局的 afterEach 钩子。              router.afterEach</span><br><span class="line">8、触发 DOM 更新。</span><br></pre></td></tr></table></figure>



<h2 id="8-7-子路由"><a href="#8-7-子路由" class="headerlink" title="8.7 子路由"></a>8.7 子路由</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-router-3.0.1.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/account"</span>&gt;</span>Account<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是 Account 组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/account/login"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/account/register"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 组件的模板对象</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> account = &#123;</span></span><br><span class="line"><span class="actionscript">      template: <span class="string">'#tmpl'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> register = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></span><br><span class="line">      routes: [</span><br><span class="line">        &#123;</span><br><span class="line"><span class="actionscript">          path: <span class="string">'/account'</span>,</span></span><br><span class="line">          component: account,</span><br><span class="line"><span class="actionscript">          <span class="comment">// 使用children属性实现子路由，同时路由的path前面不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址</span></span></span><br><span class="line">          children: [</span><br><span class="line"><span class="actionscript">            &#123; path: <span class="string">'login'</span>, component: login &#125;,</span></span><br><span class="line"><span class="actionscript">            &#123; path: <span class="string">'register'</span>, component: register &#125;</span></span><br><span class="line">          ]</span><br><span class="line">        &#125;,</span><br><span class="line"><span class="actionscript">		<span class="comment">//不能在这里写子路由，当前路由和/account路由是平级关系，当url改掉之后，当前路由会完全占据之前的router-view的坑</span></span></span><br><span class="line"><span class="actionscript">		<span class="comment">//&#123; path: '/account/login', component: login &#125;,</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">//&#123; path: '/account/register', component: register &#125;</span></span></span><br><span class="line">      ]</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建Vue实例得到ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line">      router</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="8-8-命名视图"><a href="#8-8-命名视图" class="headerlink" title="8.8 命名视图"></a>8.8 命名视图</h2><p>有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 <code>sidebar</code> (侧导航) 和 <code>main</code> (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 <code>router-view</code> 没有设置名字，那么默认为 <code>default</code>。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-router-3.0.1.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">    html,</span><br><span class="line">    body &#123;</span><br><span class="line">      margin: 0;</span><br><span class="line">      padding: 0;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.header</span> &#123;</span></span><br><span class="line">      background-color: orange;</span><br><span class="line">      height: 80px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    h1 &#123;</span><br><span class="line">      margin: 0;</span><br><span class="line">      padding: 0;</span><br><span class="line">      font-size: 16px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.container</span> &#123;</span></span><br><span class="line">      display: flex;</span><br><span class="line">      height: 600px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.left</span> &#123;</span></span><br><span class="line">      background-color: lightgreen;</span><br><span class="line">      flex: 2;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">    <span class="selector-class">.main</span> &#123;</span></span><br><span class="line">      background-color: lightpink;</span><br><span class="line">      flex: 8;</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">	<span class="comment">&lt;!--没有指定router-view的name,默认就放default组件--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">	   <span class="comment">&lt;!--指定了router-view的name为left,呈现left组件--&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">"left"</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">	  <span class="comment">&lt;!--指定了router-view的name为main,呈现main组件--&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">"main"</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> header = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"header"</span>&gt;</span>Header头部区域<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> leftBox = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"left"</span>&gt;</span>Left侧边栏区域<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> mainBox = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"main"</span>&gt;</span>mainBox主体区域<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建路由对象</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></span><br><span class="line">      routes: [</span><br><span class="line"><span class="actionscript">		<span class="comment">//要实现上面header、左边left、右边main，下面方式做不了，只能做到三选一，在某一路径下，要么header呈现，要么left呈现，要么main呈现</span></span></span><br><span class="line">        /* &#123; path: '/', component: header &#125;,</span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/'</span>, component: leftBox &#125;,</span></span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/'</span>, component: mainBox &#125; */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        &#123;</span><br><span class="line"><span class="actionscript">          path: <span class="string">'/'</span>, components: &#123;</span></span><br><span class="line"><span class="actionscript">			<span class="comment">//默认情况下显示的组件</span></span></span><br><span class="line"><span class="actionscript">            <span class="string">'default'</span>: header,</span></span><br><span class="line"><span class="actionscript">			<span class="comment">//left情况下显示的组件</span></span></span><br><span class="line"><span class="actionscript">            <span class="string">'left'</span>: leftBox,</span></span><br><span class="line"><span class="actionscript">			<span class="comment">//main情况下显示的组件</span></span></span><br><span class="line"><span class="actionscript">            <span class="string">'main'</span>: mainBox</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line">      router</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="9-watch-computed-methods"><a href="#9-watch-computed-methods" class="headerlink" title="9.watch\computed\methods"></a>9.watch\computed\methods</h1><h2 id="9-1-watch属性的使用"><a href="#9-1-watch属性的使用" class="headerlink" title="9.1 watch属性的使用"></a>9.1 watch属性的使用</h2><p>考虑一个问题：想要实现 第一个文本框 和 第二个文本框 两个文本框的内容改变，则全名的文本框中的值也跟着改变，如何实现？</p>
<h3 id="9-1-1-使用keyup事件"><a href="#9-1-1-使用keyup事件" class="headerlink" title="9.1.1 使用keyup事件"></a>9.1.1 使用keyup事件</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"firstname"</span> @<span class="attr">keyup</span>=<span class="string">"getFullname"</span>&gt;</span> +</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"lastname"</span> @<span class="attr">keyup</span>=<span class="string">"getFullname"</span>&gt;</span> =</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"fullname"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        firstname: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        lastname: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        fullname: <span class="string">''</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;</span><br><span class="line">        getFullname() &#123;</span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.fullname = <span class="keyword">this</span>.firstname + <span class="string">'-'</span> + <span class="keyword">this</span>.lastname</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="9-9-2-使用watch监听文本框变化"><a href="#9-9-2-使用watch监听文本框变化" class="headerlink" title="9.9.2 使用watch监听文本框变化"></a>9.9.2 使用watch监听文本框变化</h3><p>watch的作用：主要用来监听data属性值的变化</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"firstname"</span>&gt;</span> +</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"lastname"</span>&gt;</span> =</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"fullname"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建Vue实例得到ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        firstname: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        lastname: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        fullname: <span class="string">''</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line"><span class="actionscript">	  <span class="comment">// 使用watch属性可以监视data中指定数据的变化，然后触发watch中对应的function处理函数</span></span></span><br><span class="line">      watch: &#123; </span><br><span class="line"><span class="actionscript">        <span class="string">'firstname'</span>: <span class="function"><span class="keyword">function</span> <span class="params">(newVal, oldVal)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">          <span class="comment">// console.log('监视到了 firstname 的变化')</span></span></span><br><span class="line"><span class="actionscript">          <span class="comment">// this.fullname = this.firstname + '-' + this.lastname</span></span></span><br><span class="line"><span class="actionscript">          <span class="comment">// console.log(newVal + ' --- ' + oldVal)</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.fullname = newVal + <span class="string">'-'</span> + <span class="keyword">this</span>.lastname</span></span><br><span class="line">        &#125;,</span><br><span class="line"><span class="actionscript">        <span class="string">'lastname'</span>: <span class="function"><span class="keyword">function</span> <span class="params">(newVal)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">this</span>.fullname = <span class="keyword">this</span>.firstname + <span class="string">'-'</span> + newVal</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="9-9-3-使用watch监听路由地址的变化"><a href="#9-9-3-使用watch监听路由地址的变化" class="headerlink" title="9.9.3 使用watch监听路由地址的变化"></a>9.9.3 使用watch监听路由地址的变化</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1. 导入包 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-router-3.0.1.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/register"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 容器 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 2. 创建子组件</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>这是登录子组件，这个组件是 奔波霸 开发的。<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> register = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>这是注册子组件，这个组件是 霸波奔 开发的。<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 3. 创建一个路由对象</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></span><br><span class="line">      routes: [ </span><br><span class="line"><span class="actionscript">	     <span class="comment">// 路由规则数组</span></span></span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/'</span>, redirect: <span class="string">'/login'</span> &#125;,</span></span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/login'</span>, component: login &#125;,</span></span><br><span class="line"><span class="actionscript">        &#123; path: <span class="string">'/register'</span>, component: register &#125;</span></span><br><span class="line">      ],</span><br><span class="line"><span class="actionscript">      linkActiveClass: <span class="string">'myactive'</span> </span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line">      router,</span><br><span class="line">      watch: &#123;</span><br><span class="line"><span class="actionscript">        <span class="comment">//  this.$route.path</span></span></span><br><span class="line"><span class="actionscript">        <span class="string">'$route.path'</span>: <span class="function"><span class="keyword">function</span> <span class="params">(newVal, oldVal)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">if</span> (newVal === <span class="string">'/login'</span>) &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">'欢迎进入登录页面'</span>)</span></span><br><span class="line"><span class="actionscript">          &#125; <span class="keyword">else</span> <span class="keyword">if</span> (newVal === <span class="string">'/register'</span>) &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">'欢迎进入注册页面'</span>)</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="9-2-computer属性的使用"><a href="#9-2-computer属性的使用" class="headerlink" title="9.2 computer属性的使用"></a>9.2 computer属性的使用</h2><p>computer属性的作用：当前的属性值是由data中的其他若干属性值推导出来的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"firstname"</span>&gt;</span> +</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"middlename"</span>&gt;</span> +</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"lastname"</span>&gt;</span> =</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"fullname"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">      el: <span class="string">'#app'</span>,</span></span><br><span class="line">      data: &#123;</span><br><span class="line"><span class="actionscript">        firstname: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        lastname: <span class="string">''</span>,</span></span><br><span class="line"><span class="actionscript">        middlename: <span class="string">''</span></span></span><br><span class="line">      &#125;,</span><br><span class="line">      methods: &#123;&#125;,</span><br><span class="line">      computed: &#123; </span><br><span class="line"><span class="actionscript">	    <span class="comment">// 在computed中可以定义一些属性，这些属性叫做【计算属性】，计算属性的本质就是一个方法，只不过我们在使用这些计算属性的时候是把它们的名称直接当作属性来使用的，并不会把计算属性当作方法去调用</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">        <span class="comment">// 注意1： 计算属性在引用的时候，一定不要加()去调用，直接把它当作普通属性去使用就好了；</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">// 注意2： 在计算属性的function中所用到的任何data中的数据发送了变化，就会立即重新计算这个计算属性的值</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">// 注意3： 计算属性的求值结果会被缓存起来，方便下次直接使用。</span></span></span><br><span class="line"><span class="actionscript">        <span class="string">'fullname'</span>: <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">'ok'</span>)</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">return</span> <span class="keyword">this</span>.firstname + <span class="string">'-'</span> + <span class="keyword">this</span>.middlename + <span class="string">'-'</span> + <span class="keyword">this</span>.lastname</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="9-3-watch、computed和methods之间的对比"><a href="#9-3-watch、computed和methods之间的对比" class="headerlink" title="9.3 watch、computed和methods之间的对比"></a>9.3 watch、computed和methods之间的对比</h2><ol>
<li><code>computed</code>当前属性的值是依赖于其他属性的值求出来的，计算属性的结果会被缓存，除非依赖的属性变化才会重新计算，主要当作属性来使用；</li>
<li><code>methods</code>方法表示一个具体的操作，主要书写业务逻辑；</li>
<li><code>watch</code>一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作;</li>
</ol>

      
      
    </div>
    
    <div class="article-info article-info-index">
      
      

      
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-es6相关" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2019/12/05/es6%E7%9B%B8%E5%85%B3/" class="article-date">
      <time datetime="2019-12-04T16:00:00.000Z" itemprop="datePublished">2019-12-05</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/12/05/es6%E7%9B%B8%E5%85%B3/">es6相关</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <p>let fs = require(“fs”);</p>
<p>function readFile(file){<br>    //返回一个Promise()<br>    return new Promise(function(resolve,reject){<br>        //Promise中有一个读文件的异步任务<br>        fs.readFile(file,function(err,data){<br>            if(err){<br>                reject(“cuowu”)<br>            }<br>            else{<br>                //console.log(data.toString(“utf-8”))<br>                //当文件读取成功返回成功的数据<br>                resolve(data.toString(“utf-8”));<br>            }<br>        })<br>    })<br>}</p>
<p>/*readFile(“./a.txt”)<br>.then(function(){<br>    return readFile(“./b.txt”)<br>})<br>.then(function(){<br>    return readFile(“./c.txt”)<br>})<br>*/</p>
<p>//async 加在函数上，表示该函数是一个异步函数<br>//如果函数上有声明async，此时在函数内部就可以使用await<br>//await 表示等待，可以将原来异步的任务变成同步<br>//这里的read方法里面的几个读取文件的任务由于加了await，所有此时这些任务是同步的，会按照顺序向下执行<br>async function read(){<br>    console.log(“3”)<br>    var data = await readFile(“./a.txt”);<br>    console.log(data);</p>
<pre><code>var data = await readFile(&quot;./b.txt&quot;);
console.log(data);

var data = await readFile(&quot;./c.txt&quot;);
console.log(data);
console.log(&quot;4&quot;)</code></pre><p>}</p>
<p>console.log(“1”)<br>read();  //这个read方法是异步的，所以程序不会停在48行等read方法执行完毕<br>console.log(“2”)</p>

      
      
    </div>
    
    <div class="article-info article-info-index">
      
      

      
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="w-移动端开发基础" class="article article-type-w" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2019/10/10/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/" class="article-date">
      <time datetime="2019-10-09T16:00:00.000Z" itemprop="datePublished">2019-10-10</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/10/10/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/">移动端开发基础</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h1 id="移动web基础"><a href="#移动web基础" class="headerlink" title="移动web基础"></a>移动web基础</h1><h2 id="移动端开发现状"><a href="#移动端开发现状" class="headerlink" title="移动端开发现状"></a>移动端开发现状</h2><p> <img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B9%E7%9B%AE/day01/1-%E6%95%99%E5%AD%A6%E8%B5%84%E6%96%99/image/phone.jpg" alt=""></p>
<ul>
<li><p>移动web开发指的是需要适配移动设备的网页开发</p>
</li>
<li><p>移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术</p>
</li>
<li><p>移动web开发与pc端web开发的区别是什么？</p>
</li>
</ul>
<p>移动端的浏览器与pc端不同</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 欧朋浏览器 百度手机浏览器  <span class="number">360</span>安全浏览器  搜狗浏览器  猎豹浏览器等</span><br><span class="line">国内的手机浏览器都是根据webkit内核修改过来的，国内没有自主研发的内核，国内的操作系统也是基于Android系统修改的。</span><br><span class="line"></span><br><span class="line">因此在移动端，css3属性只需要加webkit前缀即可。</span><br></pre></td></tr></table></figure>



<p>移动端设备尺寸不一样(尺寸非常多，碎片化很严重)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Android： <span class="number">320</span>*<span class="number">480</span> <span class="number">480</span>*<span class="number">800</span>  <span class="number">540</span>*<span class="number">960</span> <span class="number">720</span>*<span class="number">1280</span> <span class="number">1080</span>*<span class="number">1920</span> <span class="number">2</span>k屏 <span class="number">4</span>k屏</span><br><span class="line">iphpne：  <span class="number">640</span>*<span class="number">960</span> <span class="number">640</span>*<span class="number">1136</span> <span class="number">750</span>*<span class="number">1334</span> <span class="number">1242</span>*<span class="number">2208</span></span><br></pre></td></tr></table></figure>

<h2 id="移动端开发分类"><a href="#移动端开发分类" class="headerlink" title="移动端开发分类"></a>移动端开发分类</h2><ul>
<li>原生app（native app）</li>
<li>混合app（Hybrid app）</li>
<li>web应用（webApp）</li>
</ul>
<p><strong>原生app（native app）</strong></p>
<blockquote>
<p> 原生app是基于操作系统的开发，比如安卓，ios，windows phone,他们只能在各自的操作系统上运行。</p>
</blockquote>
<p>优点：</p>
<ol>
<li>可以访问操作系统，获取更多的资源（gps，摄像头，传感器，麦克风等）</li>
<li>速度快，性能高，用户体验好</li>
<li>可以离线使用</li>
</ol>
<p>缺点：</p>
<ol>
<li>开发成本高</li>
<li>需要安装和更新，更新与发布需要审核。</li>
</ol>
<p><strong>Web App</strong></p>
<blockquote>
<p> Web应用使用H5C3开发页面，为浏览器设计的基于web的应用，可以在各种智能设备的手机浏览器上运行。不需要安装即可运行。</p>
</blockquote>
<p>优点：</p>
<ol>
<li>支持设备广泛</li>
<li>开发成本低（使用）</li>
<li>可以随时上线与更新，无需审核</li>
</ol>
<p>缺点：</p>
<ol>
<li>用户体验极度依赖网速</li>
<li>要求联网</li>
</ol>
<p><strong>混合app（Hybrid App）</strong></p>
<blockquote>
<p>Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App。（淘宝、京东、手机百度）</p>
</blockquote>
<p>Hybird App说白了就是使用了Native app的壳，里面其实还是HTML5页面。</p>
<p>优点：</p>
<ol>
<li>开发成本和难度更低，兼容多个平台</li>
<li>也可以访问手机的操作系统资源。</li>
<li>更新维护更方便</li>
</ol>
<p>缺点：</p>
<ol>
<li>用户体验相比原生app稍差。</li>
<li>性能依赖于网速</li>
</ol>
<p>总结：</p>
<p>三种开发各有优缺点，具体用什么需要根据实际情况而定，比如预算，app注重功能还是内容等。</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B9%E7%9B%AE/day01/1-%E6%95%99%E5%AD%A6%E8%B5%84%E6%96%99/image/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91%E5%88%86%E7%B1%BB.png" alt=""></p>
<h2 id="视口viewport（重要）"><a href="#视口viewport（重要）" class="headerlink" title="视口viewport（重要）"></a>视口viewport（重要）</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">问题：一个电脑上的网站，在手机端访问，效果是什么样的？</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="number">1.</span> 在手机端，html的大小都是<span class="number">980</span>px，为什么？</span><br><span class="line">这主要是历史原因导致的，因为在移动设备刚流行的时候，网站大多都是pc端的，pc端的页面宽度一般都比较大，</span><br><span class="line">移动设备的宽度比较小，如果pc端页面直接在移动端显示的话，页面就会错乱。</span><br><span class="line">为了解决这个问题，移动端html的大小直接就定死成了<span class="number">980</span>px（因为早起的pc端网站版心就是<span class="number">980</span>px居多）。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> 视口</span><br><span class="line">在pc端，html的大小默认是继承了浏览器的宽度，即浏览器多宽，html的大小就是多宽，</span><br><span class="line">但是在移动端，多出来了一个视口的概念（乔布斯）,视口说白了就是介于浏览器与html之间的一个东西，</span><br><span class="line">视口的宽度默认定死了<span class="number">980</span>px，因此html的宽度默认就是<span class="number">980</span>px，视口的特点是能够根据设备的宽度进行缩放。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="number">3.</span> 视口设置。</span><br><span class="line">对于现在的移动端页面来说，视口默认为<span class="number">980</span>px肯定不合适，因为设备宽度不够的话，视口会进行缩放，导致页面展示效果不好看。</span><br></pre></td></tr></table></figure>

<p><strong>视口参数设置</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//width 设置视口的宽度</span></span><br><span class="line"><span class="comment">//width=device-width   设置视口宽度为设备的宽度（常用）。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//initial-scale 设置初始缩放比例</span></span><br><span class="line"><span class="comment">//initial-scale=1.0  表示不缩放</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//user-scalable 设置是否允许用户缩放</span></span><br><span class="line"><span class="comment">//user-scalable=no  不允许用户缩放</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//maximum-scale  设置允许的最大缩放比例</span></span><br><span class="line"><span class="comment">//maximum-scale=1.0  可以不设置，因为都禁止用户缩放了。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//minimum-scale 设置允许最小缩放比</span></span><br><span class="line"><span class="comment">//minimum-scale=1.0  不设置，因为都禁用用户缩放了。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//标准写法：</span></span><br><span class="line"><span class="comment">//快捷键：  meta:vp + tab键</span></span><br><span class="line">&lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, user-scalable=no, initial-scale=1.0"</span>&gt;</span><br></pre></td></tr></table></figure>


<h2 id="屏幕与分辨率"><a href="#屏幕与分辨率" class="headerlink" title="屏幕与分辨率"></a>屏幕与分辨率</h2><blockquote>
<p>移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。</p>
</blockquote>
<h3 id="屏幕尺寸"><a href="#屏幕尺寸" class="headerlink" title="屏幕尺寸"></a>屏幕尺寸</h3><p>通常我们所指的屏幕<code>尺寸</code>，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示</p>
<p><code>1英寸 = 2.54厘米</code></p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B9%E7%9B%AE/day01/1-%E6%95%99%E5%AD%A6%E8%B5%84%E6%96%99/image/%E5%B1%8F%E5%B9%95%E5%B0%BA%E5%AF%B8.png" alt=""></p>
<h3 id="屏幕分辨率"><a href="#屏幕分辨率" class="headerlink" title="屏幕分辨率"></a>屏幕分辨率</h3><p>分辨率则一般用像素来度量，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，如下图所示,相同尺寸下分辨率越高，越清晰。</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B9%E7%9B%AE/day01/1-%E6%95%99%E5%AD%A6%E8%B5%84%E6%96%99/image/%E5%B1%8F%E5%B9%95%E5%88%86%E8%BE%A8%E7%8E%87.jpg" alt=""></p>
<p><code>像素</code>：指计算机显示设备中的最小单位，即一个像素点的大小。</p>
<p>像素是相对长度单位，在屏幕分辨率越高的设备，像素点越小，屏幕分辨率越低，像素点越大。</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B9%E7%9B%AE/day01/1-%E6%95%99%E5%AD%A6%E8%B5%84%E6%96%99/image/ppi%E5%AF%B9%E6%AF%94.png" alt=""></p>
<h3 id="像素密度ppi-了解"><a href="#像素密度ppi-了解" class="headerlink" title="像素密度ppi(了解)"></a>像素密度ppi(了解)</h3><p><code>PPI（Pixels Per Inch）</code>值来表示屏幕每英寸的像素数</p>
<p>利用 <em>勾股定理</em> 我们可以计算得出PPI</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B9%E7%9B%AE/day01/1-%E6%95%99%E5%AD%A6%E8%B5%84%E6%96%99/image/%E5%83%8F%E7%B4%A0%E5%AF%86%E5%BA%A6.jpg" alt=""></p>
<p>PPI值的越大说明单位尺寸里所能容纳的像素数量就越多，所能展现画面的品质也就越精细，反之就越粗糙。</p>
<p><strong>结论：当PPI 越大，展示的画质越精细。</strong></p>
<h2 id="物理像素-和-css像素"><a href="#物理像素-和-css像素" class="headerlink" title="物理像素 和 css像素"></a>物理像素 和 css像素</h2><blockquote>
<p>物理像素</p>
</blockquote>
<p>设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。</p>
<blockquote>
<p>css像素</p>
</blockquote>
<p>逻辑像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px<em>960px，而逻辑像素数为320</em>480px。因此，需要使用大约4个物理像素来显示一个CSS像素。</p>
<blockquote>
<p>像素比</p>
</blockquote>
<p>物理像素与逻辑像素之间的比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。</p>
<p>获取设备的像素比</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.devicePixelRatio  <span class="comment">//物理像素与CSS像素的比值</span></span><br></pre></td></tr></table></figure>

<h2 id="2倍图与3倍图（重要）"><a href="#2倍图与3倍图（重要）" class="headerlink" title="2倍图与3倍图（重要）"></a>2倍图与3倍图（重要）</h2><blockquote>
<p>以后同学在工作的过程中，从UI那拿到的设计图通常都是640的设计图或者是750的设计图.</p>
</blockquote>
<p>把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B9%E7%9B%AE/day01/1-%E6%95%99%E5%AD%A6%E8%B5%84%E6%96%99/image/2x.png" alt=""></p>
<p>设备像素比devicePixelRatio：即像素的压缩比例</p>
<p><strong>结论 ：在移动端为了在高清屏手机上显示得更加细腻，通常会使用更大的图片，比如2倍图或者3倍图。</strong></p>
<p>【演示：2倍图】</p>
<h2 id="移动端调试问题"><a href="#移动端调试问题" class="headerlink" title="移动端调试问题"></a>移动端调试问题</h2><ol>
<li>模拟器调试</li>
<li>真机调试：使用手机进行访问。</li>
</ol>
<p>手机设备五花八门，屏幕尺寸都大不一样，尤其是安卓端，给我们的页面预览带来了一些麻烦。在实际工作中，作为开发者不可能有足够的设备让我们去测试（<strong>除了测试部门</strong> ），即便有，效率也特别的低，因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。</p>
<h1 id="流式布局"><a href="#流式布局" class="headerlink" title="流式布局"></a>流式布局</h1><p><strong>移动端的特点</strong></p>
<ul>
<li>手机端的兼容性问题比PC端小很多，因为手机端的浏览器版本比较新</li>
<li>手机端屏幕比较小，能够放的内容比较少。</li>
</ul>
<p>问题：布局的时候怎么解决屏幕大小不一致的问题？</p>
<ul>
<li>PC端，固定版心，让所有分辨率的电脑的版心都是一样的，比如京东</li>
<li>移动端：移动端无法设置版心，因为移动端的设备屏幕本身就小，设置版心不合适。因此移动端大多会采用流式布局（百分比布局）</li>
</ul>
<p><strong>流式布局</strong>，也叫百分比布局，是移动端开发中经常使用的布局方式之一。</p>
<p>流式布局的特征：</p>
<ul>
<li>宽度自适应，高度写死，并不是百分百还原设计图</li>
<li>图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。</li>
<li>一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化</li>
</ul>
<p><strong>流式布局无法做到所有设备都非常逼真的还原设计图，有些设备显示效果不是特别的好看。但是流式布局是移动端非常常用的一种布局方式，比较简单，需要掌握（携程、京东)</strong></p>
<p>**</p>
<p>经典的流式布局</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 左侧固定，右侧自适应</span></span><br><span class="line"><span class="comment">//2. 右侧固定，左侧自适应</span></span><br><span class="line"><span class="comment">//3. 两侧固定，中间自适应（圣杯布局，双飞翼布局）</span></span><br><span class="line"><span class="comment">//4. 等分布局</span></span><br></pre></td></tr></table></figure>



<h1 id="less"><a href="#less" class="headerlink" title="less"></a>less</h1><h2 id="Less简介"><a href="#Less简介" class="headerlink" title="Less简介"></a>Less简介</h2><blockquote>
<p>CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS/sass 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。</p>
</blockquote>
<p>(less css预处理器)</p>
<p>本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。</p>
<p><strong>less仅仅是写css的另一种方式，写出来的less文件浏览器也不识别，所以啊，我们写完了less文件，还需要通过less解析器解析成css，最终浏览器引入的还是css文件。</strong></p>
<p>学习网站：</p>
<p>中文网: <a href="http://lesscss.cn/" target="_blank" rel="noopener">http://lesscss.cn/</a></p>
<h2 id="less的编译"><a href="#less的编译" class="headerlink" title="less的编译"></a>less的编译</h2><blockquote>
<p>如何把less文件变成css文件</p>
</blockquote>
<h3 id="引入less-js文件（了解）"><a href="#引入less-js文件（了解）" class="headerlink" title="引入less.js文件（了解）"></a>引入less.js文件（了解）</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 必须指定rel的类型是stylesheet/less --&gt;</span> </span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet/less"</span> <span class="attr">href</span>=<span class="string">"less/01.less"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"less.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意：这种方式必须在http协议下运行，因为本质上less.js是通过ajax请求了less文件，进行编译。</strong></p>
<p>缺点：</p>
<ol>
<li>需要多引入一个less.js文件</li>
<li>需要多一次http请求，file协议打开无效</li>
<li>如果浏览器禁用了js，那么无法生效</li>
<li>无法实时的看到编译的结果。</li>
</ol>
<h3 id="使用考拉"><a href="#使用考拉" class="headerlink" title="使用考拉"></a>使用考拉</h3><blockquote>
<p>koala是一个前端预处理器语言（less/sass）图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。</p>
</blockquote>
<p><a href="http://koala-app.com/index-zh.html" target="_blank" rel="noopener">考拉官网</a></p>
<p>使用步骤：</p>
<ol>
<li>把<code>less</code>文件夹拖进去</li>
<li>会在当前目录生成一个<code>css</code>目录</li>
</ol>
<p>优点：不用node环境，不用less环境，koala内置了。</p>
<h2 id="Less语法"><a href="#Less语法" class="headerlink" title="Less语法"></a>Less语法</h2><h3 id="less初体验"><a href="#less初体验" class="headerlink" title="less初体验"></a>less初体验</h3><p>新建一个less文件，输入以下代码:</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@color:</span>red;</span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>:<span class="variable">@color</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>可以看到，webstorm自动的帮我们生成了对应的css文件。</p>
<h3 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h3><p><strong>注释</strong></p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*这个注释是CSS中的注释，因此会编译到css中*/</span></span><br><span class="line"><span class="comment">//这个注释,CSS中用不了，因此不会编译出来。</span></span><br></pre></td></tr></table></figure>

<p><strong>变量</strong></p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@charset</span> <span class="string">"UTF-8"</span>;</span><br><span class="line"><span class="variable">@wjs_color:</span><span class="number">#e92322</span>;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">@wjs_color</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="variable">@wjs_color</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="mixin混入"><a href="#mixin混入" class="headerlink" title="mixin混入"></a>mixin混入</h3><p><strong>混入样式类</strong></p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@charset</span> <span class="string">"UTF-8"</span>;</span><br><span class="line"><span class="comment">//混入</span></span><br><span class="line"><span class="selector-class">.btn</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn_border</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn_danger</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn_block</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//混入其他类的样式。</span></span><br><span class="line"><span class="selector-class">.my_btn</span> &#123;</span><br><span class="line">  <span class="selector-class">.btn</span>();</span><br><span class="line">  <span class="selector-class">.btn_block</span>();</span><br><span class="line">  <span class="selector-class">.btn_border</span>();</span><br><span class="line">  <span class="selector-class">.btn_danger</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>编译后的css</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@charset</span> <span class="string">"UTF-8"</span>;</span><br><span class="line"><span class="selector-class">.btn</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn_border</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn_danger</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn_block</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_btn</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>缺点：写了很多类，但是都编译到css文件中了，其实我们需要的仅仅是.my_btn这一个类。</p>
<p><strong>混入函数</strong></p>
<p>不带参数的函数</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@charset</span> <span class="string">"UTF-8"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//不会被编译</span></span><br><span class="line"><span class="selector-class">.btn</span>() &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_btn</span> &#123;</span><br><span class="line">  <span class="selector-class">.btn</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>带参数的函数</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.btn_border</span>(<span class="variable">@width</span>) &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="variable">@width</span> solid <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_btn</span> &#123;</span><br><span class="line">  <span class="comment">//如果函数定义了参数，调用的时候必须传入参数，否则会报错</span></span><br><span class="line">  <span class="selector-class">.btn_border</span>();</span><br><span class="line">  <span class="comment">//传入参数，就不会报错</span></span><br><span class="line">  <span class="selector-class">.btn_border</span>(<span class="number">10px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>带默认值的函数</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.btn_border</span>(<span class="variable">@width</span>:<span class="number">1px</span>) &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="variable">@width</span> solid <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_btn</span> &#123;</span><br><span class="line">  <span class="comment">//因为有默认值，所以不会报错</span></span><br><span class="line">  <span class="selector-class">.btn_border</span>();</span><br><span class="line">  <span class="comment">//传入参数，会覆盖1px，也不会报错</span></span><br><span class="line">  <span class="selector-class">.btn_border</span>(<span class="number">10px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="嵌套"><a href="#嵌套" class="headerlink" title="嵌套"></a>嵌套</h3><blockquote>
<p>我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。</p>
</blockquote>
<ul>
<li>使用伪类的时候 可以使用<code>&amp;</code> 表示自己</li>
</ul>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@charset</span> <span class="string">"UTF-8"</span>;</span><br><span class="line"><span class="selector-class">.wjs_header</span> &#123;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.wjs_header</span> <span class="selector-class">.header_item</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">border-left</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.wjs_header</span> <span class="selector-class">.header_item</span><span class="selector-pseudo">:first-child</span> &#123;</span><br><span class="line">  <span class="attribute">border-left</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="导入"><a href="#导入" class="headerlink" title="导入"></a>导入</h3><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@charset</span> <span class="string">"UTF-8"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@import</span> <span class="string">"01-variable"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@import</span> <span class="string">"02-maxin"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@import</span> <span class="string">"03-mixin02"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@import</span> <span class="string">"04-book"</span>;</span><br></pre></td></tr></table></figure>

<p>模块化的思想，分模块进行管理这些less文件，最终只需要使用import将less引入到一起即可。</p>
<h3 id="函数（运算）"><a href="#函数（运算）" class="headerlink" title="函数（运算）"></a>函数（运算）</h3><blockquote>
<p>在我们的 CSS 中充斥着大量的数值型的 value，less可以直接支持运算，也提供了一系列的函数提供给我们使用。</p>
</blockquote>
<p><a href="http://www.1024i.com/demo/less/reference.html" target="_blank" rel="noopener">http://www.1024i.com/demo/less/reference.html</a></p>
<h1 id="JDM"><a href="#JDM" class="headerlink" title="JDM"></a>JDM</h1><h2 id="项目结构搭建"><a href="#项目结构搭建" class="headerlink" title="项目结构搭建"></a>项目结构搭建</h2><h2 id="样式初始化"><a href="#样式初始化" class="headerlink" title="样式初始化"></a>样式初始化</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@charset</span> <span class="string">"utf-8"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* css reset 样式重置*/</span></span><br><span class="line"><span class="selector-tag">body</span>, <span class="selector-tag">div</span>, <span class="selector-tag">ul</span>, <span class="selector-tag">li</span>, <span class="selector-tag">ol</span>, <span class="selector-tag">h1</span>, <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span>, <span class="selector-tag">h4</span>, <span class="selector-tag">h5</span>, <span class="selector-tag">h6</span>, <span class="selector-tag">input</span>, <span class="selector-tag">textarea</span>, <span class="selector-tag">select</span>, <span class="selector-tag">p</span>, <span class="selector-tag">dl</span>, <span class="selector-tag">dt</span>, <span class="selector-tag">dd</span>, <span class="selector-tag">a</span>, <span class="selector-tag">img</span>, <span class="selector-tag">button</span>, <span class="selector-tag">form</span>, <span class="selector-tag">table</span>, <span class="selector-tag">th</span>, <span class="selector-tag">tr</span>, <span class="selector-tag">td</span>, <span class="selector-tag">tbody</span>, <span class="selector-tag">article</span>, <span class="selector-tag">aside</span>, <span class="selector-tag">details</span>, <span class="selector-tag">figcaption</span>, <span class="selector-tag">figure</span>, <span class="selector-tag">footer</span>, <span class="selector-tag">header</span>, <span class="selector-tag">menu</span>, <span class="selector-tag">nav</span>, <span class="selector-tag">section</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="comment">/*所有盒子布局采用内减模式*/</span></span><br><span class="line">  <span class="attribute">-webkit-box-sizing</span>: border-box;</span><br><span class="line">  <span class="comment">/* 兼容-webkit-内核浏览器 */</span></span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="comment">/*去除移动端点击高亮颜色*/</span></span><br><span class="line">  <span class="attribute">-webkit-tap-highlight-color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">'Microsoft YaHei'</span>, Arial, sans-serif;</span><br><span class="line">  <span class="comment">/*后面的都是 备胎*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span>,</span><br><span class="line"><span class="selector-tag">ul</span> &#123;</span><br><span class="line">  <span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span>,</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: none;</span><br><span class="line">  <span class="attribute">outline</span>: none;</span><br><span class="line">  <span class="comment">/* 在 移动端浏览器 表单可能会出现 阴影 高亮 3d效果,需要清除*/</span></span><br><span class="line">  <span class="attribute">-webkit-appearance</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 废物利用 */</span></span><br><span class="line"><span class="selector-tag">em</span>, <span class="selector-tag">i</span> &#123;</span><br><span class="line">  <span class="attribute">font-style</span>: normal;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*commom css 公共样式*/</span></span><br><span class="line"><span class="selector-class">.pull-left</span> &#123;</span><br><span class="line">  <span class="attribute">float</span>: left;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pull-right</span> &#123;</span><br><span class="line">  <span class="attribute">float</span>: right;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 清除浮动 */</span></span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">clear</span>: both;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">visibility</span>: hidden;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="京东头部"><a href="#京东头部" class="headerlink" title="京东头部"></a>京东头部</h2><h2 id="京东轮播图"><a href="#京东轮播图" class="headerlink" title="京东轮播图"></a>京东轮播图</h2><h2 id="京东导航"><a href="#京东导航" class="headerlink" title="京东导航"></a>京东导航</h2><h2 id="京东快报"><a href="#京东快报" class="headerlink" title="京东快报"></a>京东快报</h2><h2 id="京东秒杀"><a href="#京东秒杀" class="headerlink" title="京东秒杀"></a>京东秒杀</h2><h2 id="京东主会场"><a href="#京东主会场" class="headerlink" title="京东主会场"></a>京东主会场</h2>
      
      
    </div>
    
    <div class="article-info article-info-index">
      
      

      
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-PHP相关" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2019/05/06/PHP%E7%9B%B8%E5%85%B3/" class="article-date">
      <time datetime="2019-05-05T16:00:00.000Z" itemprop="datePublished">2019-05-06</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/05/06/PHP%E7%9B%B8%E5%85%B3/">PHP相关</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h1 id="学生信息管理系统"><a href="#学生信息管理系统" class="headerlink" title="学生信息管理系统"></a>学生信息管理系统</h1><h3 id="基本功能"><a href="#基本功能" class="headerlink" title="基本功能"></a>基本功能</h3><ul>
<li>学生添加功能</li>
<li>展示学生信息功能</li>
<li>删除学生信息</li>
</ul>
<h3 id="实现思路"><a href="#实现思路" class="headerlink" title="实现思路"></a>实现思路</h3><p>注册功能</p>
<pre><code>1. 获取前端表单传递数据
2. 获取前端传递图片，并保存在服务器中
3. 将表单的数据和上传图片的地址 保存在数据库中
4. 页面跳转到列表页
5.跳转用header(&apos;location:01-list.php&apos;)</code></pre><p>向data.txt中保存数据的过程：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1-用一维数组存放 获取的 学生数据</span><br><span class="line">2.从data.txt中取出字符串形式学生数据</span><br><span class="line">3.将字符串数据转成二维数组</span><br><span class="line">4.向二维数组中添加 学生数据（array_push(数组，追加的项)或者$arr[]&#x3D;$info）</span><br><span class="line">5.把二维数组转成字符串</span><br><span class="line">6.把字符串中的数据 存储到data.txt中</span><br></pre></td></tr></table></figure>



<p>注意：</p>
<pre><code>我们目前没有学习数据库，使用txt记事本来模拟，实现思路：
1. 存储一个人的信息使用一维数组
2. 存储一个班的信息要使用二维数组
3. 数组是一个变量，页面关闭后，数据会销毁，下次打开页面后，数据不存在了
4. 为了数据能永久存储，把数据存储到txt文件中
5. 班级学生信息存放在二维数组中，添加和删除学生信息，就是对二维数组进行追加和删除，对二维数组操作完成后，再把二维数组存储到data.txt
6.跳转用header(&apos;location:01-list.php&apos;)</code></pre><p>展示功能</p>
<pre><code>1.获取txt记事本中的学生数据字符串，转成二维数组
2.动态遍历渲染在页面中</code></pre><p>删除功能</p>
<pre><code>1.获取要删除学生id,
2.从data.txt中取出字符串形式学生数据
3.将字符串数据转成二维数组
4.根据id，从二维数组中删除指定索引的元素
5.把二维数组转成字符串
6.把字符串中的数据 存储到data.txt中
7.删除数组用array_splice(数组，从哪开始删，删几个，)</code></pre><h1 id="HTTP协议"><a href="#HTTP协议" class="headerlink" title="HTTP协议"></a>HTTP协议</h1><p><strong>协议：</strong></p>
<blockquote>
<p>协议，就是事先的一种约定、规则、规范、标准。</p>
</blockquote>
<p> <strong>常见协议</strong></p>
<ul>
<li>HTTP、HTTPS 超文本传输协议 </li>
<li>FTP 文件传输协议</li>
<li>SMTP 简单邮件传输协议</li>
</ul>
<p><strong>HTTP协议</strong></p>
<p>HTTP协议即超文本传输协议,  是一个 [浏览器端] 和 [服务器端] 请求和响应的标准</p>
<ul>
<li>常用请求方法  GET, POST</li>
</ul>
<ul>
<li>请求 (request)：<code>请求行、请求头、请求主体</code>。</li>
</ul>
<ul>
<li>响应 (response)：<code>状态行、响应头、响应主体</code>。</li>
</ul>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/php-03/%E7%AC%94%E8%AE%B0/img/http1.png" alt=""></p>
<h3 id="请求报文和响应报文"><a href="#请求报文和响应报文" class="headerlink" title="请求报文和响应报文"></a>请求报文和响应报文</h3><p><strong>请求/请求报文</strong></p>
<p>​    请求由客户端发起，其规范格式为：请求行、请求头、请求主体。    </p>
<p><strong>响应/响应报文</strong></p>
<p>​    响应由服务器发出，其规范格式为：状态行、响应头、响应主体。</p>
<p><strong>get请求的请求报文详解</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//--------------------------请求行--------------------------------</span></span><br><span class="line"><span class="comment">// GET  请求方式</span></span><br><span class="line"><span class="comment">// /day02/01.php?username=pp&amp;password=123456    请求路径+参数（注意点）</span></span><br><span class="line"><span class="comment">// HTTP/1.1 HTTP的版本号</span></span><br><span class="line">GET /day02/<span class="number">01.</span>php?username=pp&amp;password=<span class="number">123456</span> HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//--------------------------请求头--------------------------------</span></span><br><span class="line"><span class="comment">// Host:主机地址</span></span><br><span class="line">Host:localhost</span><br><span class="line"><span class="comment">// HTTP1.1版本默认开启，建立过连接后，TCP连接不会断开，下次连接可以继续使用（底层，不用管）</span></span><br><span class="line">Connection: keep-alive</span><br><span class="line"><span class="comment">//chrome浏览器自己增加的，不用管</span></span><br><span class="line">Upgrade-Insecure-Requests: <span class="number">1</span></span><br><span class="line"><span class="comment">//浏览器的代理字符串（版本信息）</span></span><br><span class="line">User-Agent: Mozilla/<span class="number">5.0</span> (Windows NT <span class="number">10.0</span>; WOW64) AppleWebKit/<span class="number">537.36</span> (KHTML, like Gecko) Chrome/<span class="number">58.0</span><span class="number">.3029</span><span class="number">.96</span> Safari/<span class="number">537.36</span></span><br><span class="line"><span class="comment">//浏览器端可以接受的类型。</span></span><br><span class="line">Accept: text/html,application/xhtml+xml,application/xml;q=<span class="number">0.9</span>,image/webp,<span class="string">`*/*`</span>;q=<span class="number">0.8</span></span><br><span class="line"><span class="comment">//从哪个页面发出的请求</span></span><br><span class="line">Referer: http:<span class="comment">//localhost/day02/01-login.html</span></span><br><span class="line"><span class="comment">//检查浏览器支持的压缩方式</span></span><br><span class="line">Accept-Encoding: gzip, deflate, sdch</span><br><span class="line"><span class="comment">//浏览器支持的语言，优先中文。</span></span><br><span class="line">Accept-Language: zh-CN,zh;q=<span class="number">0.8</span>,en;q=<span class="number">0.6</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//----------------------------请求主体-------------------------------------</span></span><br><span class="line"><span class="comment">//get请求没有请求体，因为要传递的数据已经拼接到了请求主头中</span></span><br></pre></td></tr></table></figure>



<p><strong>POST请求的请求报文</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//-----------------------请求行---------------------------------------------</span></span><br><span class="line">POST /day02/<span class="number">01.</span>php HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//-----------------------请求头--------------------------------------------</span></span><br><span class="line">Host:localhost</span><br><span class="line">Connection: keep-alive</span><br><span class="line"><span class="comment">//传递的参数的长度。</span></span><br><span class="line">Content-Length: <span class="number">29</span></span><br><span class="line">Cache-Control: max-age=<span class="number">0</span> <span class="comment">//禁用缓存</span></span><br><span class="line">Origin: http:<span class="comment">//localhost 响应地址</span></span><br><span class="line">Upgrade-Insecure-Requests: <span class="number">1</span> 允许https协议</span><br><span class="line">User-Agent: Mozilla/<span class="number">5.0</span> (Windows NT <span class="number">10.0</span>; WOW64) AppleWebKit/<span class="number">537.36</span> (KHTML, like Gecko) Chrome/<span class="number">58.0</span><span class="number">.3029</span><span class="number">.96</span> Safari/<span class="number">537.36</span></span><br><span class="line"><span class="comment">//内容类型：表单数据，如果是post请求，必须指定这个属性。</span></span><br><span class="line">Content-Type: application/x-www-form-urlencoded</span><br><span class="line">Accept: text/html,application/xhtml+xml,application/xml;q=<span class="number">0.9</span>,image/webp,<span class="string">`*/*`</span>;q=<span class="number">0.8</span> 可以接受的类型</span><br><span class="line">Referer: http:<span class="comment">//localhost/day02/01-login.html 发送请求的地址</span></span><br><span class="line">Accept-Encoding: gzip, deflate 可以接受的类型</span><br><span class="line">Accept-Language: zh-CN,zh;q=<span class="number">0.8</span>,en;q=<span class="number">0.6</span> 可以接受的语言</span><br><span class="line"></span><br><span class="line"><span class="comment">//------------------------请求体------------------------------------------</span></span><br><span class="line">username=pp&amp;password=<span class="number">123456</span></span><br></pre></td></tr></table></figure>



<p><strong>GET请求与POST请求的对比</strong> </p>
<ul>
<li>GET请求没有请求体，因为GET请求的参数拼接到地址栏中了</li>
<li>POST请求有请求体，就是传递的参数。</li>
</ul>
<h2 id="响应与响应报文"><a href="#响应与响应报文" class="headerlink" title="响应与响应报文"></a>响应与响应报文</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//---------------------状态行（响应行）-------------------------------</span></span><br><span class="line"><span class="comment">//HTTP/1.1  HTTP版本</span></span><br><span class="line"><span class="comment">//200 响应的状态</span></span><br><span class="line">	<span class="comment">//200表示成功</span></span><br><span class="line">	<span class="comment">//302页面重定向</span></span><br><span class="line">	<span class="comment">//304表示文档未修改</span></span><br><span class="line">	<span class="comment">//404表示找不到资源</span></span><br><span class="line">	<span class="comment">//500表示服务端错误</span></span><br><span class="line">HTTP/<span class="number">1.1</span> <span class="number">200</span> OK</span><br><span class="line"></span><br><span class="line"><span class="comment">//----------------------响应头-----------------------------------------------</span></span><br><span class="line"><span class="built_in">Date</span>: Thu, <span class="number">22</span> Jun <span class="number">2017</span> <span class="number">16</span>:<span class="number">51</span>:<span class="number">22</span> GMT <span class="comment">//服务器的时间</span></span><br><span class="line">Server: Apache/<span class="number">2.4</span><span class="number">.23</span> (Win32) OpenSSL/<span class="number">1.0</span><span class="number">.2</span>j PHP/<span class="number">5.4</span><span class="number">.45</span>  <span class="comment">//服务器的版本信息</span></span><br><span class="line">X-Powered-By: PHP/<span class="number">5.4</span><span class="number">.45</span>  <span class="comment">//后台编程语言信息</span></span><br><span class="line">Content-Length: <span class="number">18</span>   <span class="comment">//服务器的响应主体长度</span></span><br><span class="line"><span class="comment">//内容类型，告诉浏览器该如何解析响应结果</span></span><br><span class="line">Content-Type: text/html;charset=utf<span class="number">-8</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//-----------------------响应主体------------------------------------------------</span></span><br><span class="line">用户登录成功</span><br></pre></td></tr></table></figure>

<p>​    通常来说，我们不会用抓包工具来查看请求和响应，太麻烦了，可以直接使用谷歌浏览器来查看请求报文和响应报文。</p>
<p>​    谷歌浏览器会对报文进行一定的格式化，看起来虽然不是原生的报文，但是使用起来更加的方便简洁。</p>
<h1 id="Mysql数据库技术"><a href="#Mysql数据库技术" class="headerlink" title="Mysql数据库技术"></a>Mysql数据库技术</h1><h2 id="初识数据库概念"><a href="#初识数据库概念" class="headerlink" title="初识数据库概念"></a>初识数据库概念</h2><p><strong>数据库基本概念</strong></p>
<blockquote>
<p>专门用来存储、管理数据的仓库（空间），按照数据结构来组织、存储和管理，可以实现高效存取数据。英文：Database, DB。</p>
</blockquote>
<p><strong>关系型数据库</strong></p>
<p>当前使用范围最广的数据库。基于表, 按照关系模型（数据之间表与表存在联系）组织的数据库。</p>
<p>订单：订单编号，商品名称，价格，数量，配送地址</p>
<table>
<thead>
<tr>
<th><strong>订单编号</strong></th>
<th><strong>商品名称</strong></th>
<th><strong>价格</strong></th>
<th><strong>数量</strong></th>
<th><strong>配送地址</strong></th>
</tr>
</thead>
<tbody><tr>
<td>100123</td>
<td>华为mate10</td>
<td>4999</td>
<td>2</td>
<td>北京市京顺路99号</td>
</tr>
<tr>
<td>100124</td>
<td>花裙子</td>
<td>499</td>
<td>1</td>
<td>北京市清华大学1号楼</td>
</tr>
</tbody></table>
<ul>
<li>关系型数据库: 基于表, 表与表之间可以存在关系进行多表查询的存储方式, 适合较为复杂的存储   mysql, SQL Server, oracle</li>
</ul>
<ul>
<li>非关系型 数据库: 基于键值对的存储方式, 数据之间没有耦合性, 特点执行效率高  mongodb</li>
</ul>
<h3 id="数据库的组织架构："><a href="#数据库的组织架构：" class="headerlink" title="数据库的组织架构："></a><strong>数据库的组织架构：</strong></h3><ul>
<li><p><strong>数据表（table）</strong></p>
<p>表是以行和列的形式组织起来的数据的集合。项目一般需要不同的数据表，将数据分布存储在不同的数据表中。</p>
<p>数据库的数据存放在数据表中</p>
<p>如：订单表，用户表，商品表，配送地址表</p>
</li>
</ul>
<ul>
<li><p><strong>记录-行（row，record）</strong></p>
<p>我们把表中的每一行叫做一条“记录”</p>
</li>
</ul>
<ul>
<li><p><strong>字段-列 (column，field)</strong></p>
<p>字段是比记录更小的单位，多个字段集合组成记录, 即数据项</p>
</li>
</ul>
<h3 id="关系型数据库—MySQL"><a href="#关系型数据库—MySQL" class="headerlink" title="关系型数据库—MySQL"></a>关系型数据库—MySQL</h3><blockquote>
<p>数据库官网地址：<a href="https://dev.mysql.com" target="_blank" rel="noopener">https://dev.mysql.com</a></p>
</blockquote>
<blockquote>
<p>英文手册地址：<a href="https://dev.mysql.com/doc/refman/5.5/en/" target="_blank" rel="noopener">https://dev.mysql.com/doc/refman/5.5/en/</a></p>
</blockquote>
<blockquote>
<p>中文参考论坛：<a href="http://www.mysqlpub.com/" target="_blank" rel="noopener">http://www.mysqlpub.com/</a></p>
</blockquote>
<h3 id="SQL-操作数据库的语言"><a href="#SQL-操作数据库的语言" class="headerlink" title="SQL-操作数据库的语言"></a>SQL-操作数据库的语言</h3><p>​    SQL：structured Query Language 结构化查询语言。<br>​    SQL语句，相当于客户端发送的命令（与数据库服务器进行交互）, 我们后面就是要学习 SQL 语句操作数据库</p>
<ul>
<li><p>.sql  数据库脚本语言的后缀。  </p>
</li>
<li><p>主要是执行 数据操作的基本逻辑有：增删改查 操作</p>
</li>
</ul>
<h2 id="数据库操作方式"><a href="#数据库操作方式" class="headerlink" title="数据库操作方式"></a>数据库操作方式</h2><ul>
<li><p>数据库的相关设置： （打开数据库命令行，修改数据库密码等）</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/php-03/%E7%AC%94%E8%AE%B0/img/mysqlcmd01.png" alt="">;</p>
</li>
<li><p>命令行演示（了解）<br><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/php-03/%E7%AC%94%E8%AE%B0/img/cmd.png" alt=""></p>
<ul>
<li>show databases; 展示所有数据库</li>
<li>use database; 使用某个数据库  use XX;</li>
<li>show tables;展示所有的表</li>
</ul>
</li>
</ul>
<ul>
<li><p>图形界面客户端 </p>
<p>​    <img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/php-03/%E7%AC%94%E8%AE%B0/img/connect.png" alt=""></p>
</li>
</ul>
<hr>
<h2 id="数据库表的操作"><a href="#数据库表的操作" class="headerlink" title="数据库表的操作"></a>数据库表的操作</h2><h3 id="数据库的数据类型"><a href="#数据库的数据类型" class="headerlink" title="数据库的数据类型"></a>数据库的数据类型</h3><p>字段类型初步介绍</p>
<ul>
<li><p>整型</p>
<p>存储如年龄，产品数量，编号等。 int</p>
</li>
</ul>
<ul>
<li><p>小数类型</p>
<p>float(普通小数，可能会丢失精度)  ,      如. 重量，工资，奖金，价格等</p>
<p>decimal 使用decimal类型，实现小数的精确存储,一般用来存储与钱有关的数字。3.333333331</p>
</li>
<li><p>字符串型</p>
<p>varchar(M)，char(M)  M为该字段可以存储的最多字符数，如varchar(10)。</p>
<p>varchar一般用来存储长度变化比较大的字符串，如文章标题，商品名称，    </p>
<p>char存储长度比较固定的字符串，如手机号，身份证号，序列号，邮编。    </p>
<p>此外可以使用text类型，存储较长的字符串，无需指定字符串的具体长度。</p>
</li>
<li><p>日期时间型</p>
<p>datetime,date(年月日)，time（时分秒）。年月日时分秒。</p>
</li>
</ul>
<p><strong>字段约束</strong></p>
<p>字段约束: 字段数据的属性规则（特征）</p>
<ol>
<li><p>not null 不为空</p>
<p>可以限制字段值不能为空</p>
</li>
<li><p>default  默认值, </p>
<p>可以设置字段的默认值，在没有录入时自动使用默认值填充。</p>
</li>
<li><p>primary key  主键 ：唯一标识，不能重复，不能为空 </p>
<p>设置字段为主键，主键字段的值不能重复，不能为空。而且一个数据表中只能设置一个字段为主键，作为每行记录的唯一身份信息（索引）。stu_id int primary key </p>
</li>
<li><p>auto_increment  自动增长</p>
<p>设置字段为自动增长，默认从1开始自动分配编号。自增长字段必须为一个key（索引，数据结构，便于快速查找数据，相当于书的目录），一般与primary key结合使用。</p>
<p>类型必须为整型。</p>
</li>
<li><p>unique key  不能重复</p>
<p>唯一键，设置字段的值为唯一的，可以设置多个字段为唯一键。唯一键字段的值可以为空。</p>
<p>学号设置为主键，要求唯一的，不能为空的，用来标识学生信息，</p>
</li>
</ol>
<h3 id="创建数据表"><a href="#创建数据表" class="headerlink" title="创建数据表"></a>创建数据表</h3><blockquote>
<p>注意 创建表时，每个表必须有一个主键</p>
</blockquote>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/php-03/%E7%AC%94%E8%AE%B0/img/createtable.png" alt=""></p>
<p>保存表结构：</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/php-03/%E7%AC%94%E8%AE%B0/img/savetable.png" alt=""></p>
<p>向新建的表中添加数据：</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/php-03/%E7%AC%94%E8%AE%B0/img/addtable.png" alt=""></p>
<h3 id="SQL"><a href="#SQL" class="headerlink" title="SQL"></a>SQL</h3><p>SQL编写注意点:  注释用 – , 语句结束加分号(;)</p>
<p><strong>增删改查</strong></p>
<ol>
<li>插入数据 insert</li>
</ol>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- insert into 表名 (字段列表) values (值列表)</span></span><br><span class="line"><span class="keyword">insert</span> <span class="keyword">into</span> book (<span class="keyword">name</span>,author,<span class="keyword">category</span>,price) <span class="keyword">values</span> (<span class="string">'天龙八部'</span>,<span class="string">'金庸'</span>,<span class="string">'文学'</span>,<span class="number">20</span>)</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>修改数据update</li>
</ol>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- update 表名 set 字段名称1=值1,字段名称2=值2,... where 条件</span></span><br><span class="line"><span class="keyword">update</span> book <span class="keyword">set</span> <span class="keyword">name</span>=<span class="string">'笑傲江湖'</span>,price=<span class="string">'30'</span> <span class="keyword">where</span> <span class="keyword">id</span>=<span class="number">10</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>删除数据delete</li>
</ol>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- delete from 表名 where 条件</span></span><br><span class="line"><span class="keyword">delete</span> <span class="keyword">from</span> book <span class="keyword">where</span> <span class="keyword">id</span>=<span class="number">10</span></span><br></pre></td></tr></table></figure>

<ol start="4">
<li>查询数据select</li>
</ol>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- select * from 表名 where 条件</span></span><br><span class="line"><span class="keyword">select</span> * <span class="keyword">from</span> book <span class="keyword">where</span> author=<span class="string">'金庸'</span> <span class="keyword">and</span> price&gt;<span class="number">20</span></span><br></pre></td></tr></table></figure>




<h3 id="SQL高级"><a href="#SQL高级" class="headerlink" title="SQL高级"></a>SQL高级</h3><ol>
<li><p>where子句</p>
<p>查询时，不添加where条件返回数据表所有行。需要添加限定条件，只返回需要的行。</p>
<p>select  字段列表 from  table where子句；</p>
</li>
</ol>
<ol start="2">
<li>Like 模糊匹配  % 通配符</li>
</ol>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 查找姓张的人</span></span><br><span class="line"><span class="keyword">select</span> * <span class="keyword">from</span> <span class="keyword">table</span> <span class="keyword">where</span> <span class="keyword">name</span> <span class="keyword">like</span> <span class="string">'张%'</span>;</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>in 语法：一次查询多个符合条件的数据</li>
</ol>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">select</span>  字段列表 <span class="keyword">from</span> tb <span class="keyword">where</span>  字段 <span class="keyword">in</span>  (value1,value2,value3);</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>Count() 获取返回数据的总条数</li>
</ol>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 查询满足条件数据的总条数	</span></span><br><span class="line"><span class="keyword">select</span> <span class="keyword">count</span>(*) <span class="keyword">from</span> <span class="keyword">table</span> <span class="keyword">where</span> 条件</span><br></pre></td></tr></table></figure>

<ol start="5">
<li><p>limit 子句</p>
<p>返回查找结果中的前 n 行 </p>
</li>
</ol>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">select</span> 字段列表  <span class="keyword">from</span>  <span class="keyword">table</span> <span class="keyword">limit</span> 截取的起始索引，截取的长度</span><br></pre></td></tr></table></figure>

<ol start="6">
<li>连接查询</li>
</ol>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">select</span> 字段列表 <span class="keyword">from</span>  A <span class="keyword">join</span> B <span class="keyword">on</span>  A.字段=B.字段 [<span class="keyword">where</span>子句];</span><br></pre></td></tr></table></figure>



<p>​    </p>
<p>创建学生表 ：姓名、年龄、性别</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`stu`</span> (<span class="keyword">name</span>, age, sex) <span class="keyword">VALUES</span> (<span class="string">'张三'</span>, <span class="string">'18'</span>, <span class="string">'男'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`stu`</span> (<span class="keyword">name</span>, age, sex) <span class="keyword">VALUES</span> (<span class="string">'李四'</span>, <span class="string">'19'</span>, <span class="string">'女'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`stu`</span> (<span class="keyword">name</span>, age, sex) <span class="keyword">VALUES</span> (<span class="string">'王五'</span>, <span class="string">'22'</span>, <span class="string">'男'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`stu`</span> (<span class="keyword">name</span>, age, sex) <span class="keyword">VALUES</span> (<span class="string">'赵六'</span>, <span class="string">'18'</span>, <span class="string">'女'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`stu`</span> (<span class="keyword">name</span>, age, sex) <span class="keyword">VALUES</span> (<span class="string">'田七'</span>, <span class="string">'15'</span>, <span class="string">'男'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`stu`</span> (<span class="keyword">name</span>, age, sex) <span class="keyword">VALUES</span> (<span class="string">'王八'</span>, <span class="string">'16'</span>, <span class="string">'女'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`stu`</span> (<span class="keyword">name</span>, age, sex) <span class="keyword">VALUES</span> (<span class="string">'李狗蛋'</span>, <span class="string">'18'</span>, <span class="string">'男'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`stu`</span> (<span class="keyword">name</span>, age, sex) <span class="keyword">VALUES</span> (<span class="string">'李元芳'</span>, <span class="string">'20'</span>, <span class="string">'男'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`stu`</span> (<span class="keyword">name</span>, age, sex) <span class="keyword">VALUES</span> (<span class="string">'张飞'</span>, <span class="string">'16'</span>, <span class="string">'男'</span>);</span><br></pre></td></tr></table></figure>


      
      
    </div>
    
    <div class="article-info article-info-index">
      
      

      
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-git与github使用" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2019/03/10/git%E4%B8%8Egithub%E4%BD%BF%E7%94%A8/" class="article-date">
      <time datetime="2019-03-09T16:00:00.000Z" itemprop="datePublished">2019-03-10</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/03/10/git%E4%B8%8Egithub%E4%BD%BF%E7%94%A8/">git与github使用</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h1 id="版本控制系统"><a href="#版本控制系统" class="headerlink" title="版本控制系统"></a>版本控制系统</h1><h2 id="为什么要有版本控制系统"><a href="#为什么要有版本控制系统" class="headerlink" title="为什么要有版本控制系统"></a>为什么要有版本控制系统</h2><blockquote>
<p>通过注册与登录的需求引入版本控制系统</p>
</blockquote>
<ol>
<li>在开发过程中，经常需要对一个文件进行修改甚至删除，但是我们又希望能够保存这个文件的历史记录，如果通过备份，那么管理起来会非常的复杂。</li>
<li>在多人开发时，如果需要多人合作开发一个页面，那么修改以及合并也会非常的棘手。容易出现冲突。</li>
</ol>
<h2 id="什么是版本控制系统"><a href="#什么是版本控制系统" class="headerlink" title="什么是版本控制系统"></a>什么是版本控制系统</h2><blockquote>
<p>版本控制系统（Version Control System）:是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。</p>
</blockquote>
<p>版本控制系统不仅可以应用于软件源代码的文本文件，而且可以对任何类型的文件进行版本控制。</p>
<p>【使用webstorm演示版本控制系统】</p>
<h2 id="版本控制系统的分类"><a href="#版本控制系统的分类" class="headerlink" title="版本控制系统的分类"></a>版本控制系统的分类</h2><p>参考文章：<a href="https://git-scm.com/book/zh/v1/%E8%B5%B7%E6%AD%A5-%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6" target="_blank" rel="noopener">关于版本控制的介绍</a></p>
<h3 id="本地版本控制系统"><a href="#本地版本控制系统" class="headerlink" title="本地版本控制系统"></a>本地版本控制系统</h3><p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/git/02-%E7%AC%94%E8%AE%B0/images/git1.png" alt=""></p>
<p>本地版本控制系统就是在一台机器上，记录版本的不同变化，保证内容不会丢失</p>
<ol>
<li>如果多人开发，每个人都在不同的系统和电脑上开发，没办法协同工作。</li>
</ol>
<h3 id="集中式版本控制系統"><a href="#集中式版本控制系統" class="headerlink" title="集中式版本控制系統"></a>集中式版本控制系統</h3><p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/git/02-%E7%AC%94%E8%AE%B0/images/git2.png" alt=""></p>
<p>svn是集中式的版本控制系统，集中式版本控制系统都有一个单一的集中管理的服务器（中央服务器），保存所有文件的修订版本，而协同工作的人们都通过客户端连到这台服务器，取出最新的文件或者提交更新。</p>
<ol>
<li>需要一个中央服务器来管理代码的的版本和备份</li>
<li>所有的用户电脑都是从中央服务器获取代码或者是将本地的代码提交到中央服务器</li>
<li>依赖与网络环境，如果连不上中央服务器，就无法提交和获取代码。</li>
</ol>
<h3 id="分布式版本控制系统"><a href="#分布式版本控制系统" class="headerlink" title="分布式版本控制系统"></a>分布式版本控制系统</h3><p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/git/02-%E7%AC%94%E8%AE%B0/images/git3.png" alt=""></p>
<p>git是分布式的版本控制系统。分布式版本控制系统的客户端并不只提取最新版本的文件快照，而是把代码仓库完整地镜像下来。这么一来，任何一处协同工作用的服务器发生故障，事后都可以用任何一个镜像出来的本地仓库恢复。因为每一次的提取操作，实际上都是一次对代码仓库的完整备份</p>
<ol>
<li>需要一台服务器作为代码仓库</li>
<li>每个用户电脑都是一个服务器（代码仓库），并且和代码仓库是镜像的，用户修改和获取代码都是提交到自己的服务器当中。</li>
<li>不需要网络就可以进行工作。</li>
<li>当连接网络时，用户可以选择将自己的服务器与代码仓库进行同步。</li>
</ol>
<h1 id="git基础入门"><a href="#git基础入门" class="headerlink" title="git基础入门"></a>git基础入门</h1><blockquote>
<p>Git是一款免费、开源的<strong>分布式</strong> <strong>版本控制系统</strong> ，用于敏捷高效地处理任何或小或大的项目。</p>
<p>Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。</p>
</blockquote>
<h2 id="git的安装"><a href="#git的安装" class="headerlink" title="git的安装"></a>git的安装</h2><p><a href="https://git-scm.com/download/win" target="_blank" rel="noopener">下载地址</a></p>
<p>注意：</p>
<ol>
<li>不要安装在中文目录</li>
<li>不要使用桌面管理软件</li>
</ol>
<p>安装很简单，一直下一步即可。在任意的目录下右键，能看到菜单, 就表示安装成功了。</p>
<p>使用git的两种方式</p>
<ol>
<li>git gui，即图形化界面的方式</li>
<li>git bash，命令行的方式（推荐）</li>
</ol>
<h2 id="git三个区"><a href="#git三个区" class="headerlink" title="git三个区"></a>git三个区</h2><p>要对某个项目使用git进行管理，需要使用<code>git init</code>命令初始化git仓库<br><code>git init</code>会在当前目录生成一个隐藏文件夹 .git  不要去修改这个文件夹下的任意东西。</p>
<p>git仓库会分成三个区</p>
<p>工作区：我们书写代码的地方，工作的目录就叫工作区。</p>
<p>暂存区：暂时存储的区域，在git中，代码无法直接从工作区提交到仓库区，而是需要先从工作区添加到暂存区，然后才能从暂存区提交到仓库区。暂存区的目的是避免误操作。</p>
<p>本地仓库区：将保存在暂存区域的内容永久转储到 Git 仓库中，生成版本号。生成版本号之后，就可以任何的回退到某一个具体的版本。</p>
<h2 id="git基本命令"><a href="#git基本命令" class="headerlink" title="git基本命令"></a>git基本命令</h2><h3 id="git-init"><a href="#git-init" class="headerlink" title="git init"></a>git init</h3><ul>
<li>作用：初始化git仓库，想要使用git对某个项目进行管理，需要<code>git init</code>进行初始化</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 初始化仓库， 在当前目录下生成一个隐藏文件夹.git</span></span><br><span class="line">git init</span><br></pre></td></tr></table></figure>

<h3 id="git-add"><a href="#git-add" class="headerlink" title="git add"></a>git add</h3><ul>
<li>作用：将文件由 <code>工作区</code> 添加到 <code>暂存区</code>，在git中，文件无法直接从工作区直接添加到仓库区，必须先从工作区添加到暂存区，再从暂存区添加到仓库区。</li>
<li>命令：<code>git add 文件名/目录名</code></li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 将index.html添加到暂存区</span></span><br><span class="line">git add index.html</span><br><span class="line"></span><br><span class="line"><span class="comment"># 将css目录下所有的文件添加到暂存区</span></span><br><span class="line">git add css</span><br><span class="line"></span><br><span class="line"><span class="comment"># 将当前目录下所有的js文件添加到暂存区</span></span><br><span class="line">git add *.js</span><br><span class="line"></span><br><span class="line"><span class="comment"># 添加当前目录下所有的文件</span></span><br><span class="line">git add .</span><br><span class="line">git add -A</span><br><span class="line">git add --all</span><br></pre></td></tr></table></figure>

<h3 id="git-commit"><a href="#git-commit" class="headerlink" title="git commit"></a>git commit</h3><p>作用：将文件由 暂存区 添加到 仓库区，生成版本号</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 将文件从暂存区提交到仓库</span></span><br><span class="line">git commit -m <span class="string">"提交说明"</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果不写提交说明，会进入vi编辑器，没有写提交说明，是提交不成功的。</span></span><br><span class="line">git commit   <span class="comment"># 需要使用vi输入内容</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果是一个已经暂存过的文件，可以快速提交，如果是未追踪的文件，那么命令将不生效。</span></span><br><span class="line">git commit -a -m <span class="string">'提交说明'</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 修改最近的一次提交说明， 如果提交说明不小心输错了，可以使用这个命令</span></span><br><span class="line">git commit --amend -m <span class="string">"提交说明"</span></span><br></pre></td></tr></table></figure>

<h3 id="git-config配置"><a href="#git-config配置" class="headerlink" title="git config配置"></a>git config配置</h3><p>如果是第一次提交，需要配置提交者信息，推荐和github的账号邮箱一致</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># git config  user.name 你的目标用户名</span></span><br><span class="line"><span class="comment"># git config  user.email 你的目标邮箱名</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 使用--global参数，配置全局的用户名和邮箱，只需要配置一次即可。推荐配置github的用户名和密码</span></span><br><span class="line">git config  --global user.name Jepson</span><br><span class="line">git config  --global user.email jepsonpp@qq.com</span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看配置信息</span></span><br><span class="line">git config --list</span><br></pre></td></tr></table></figure>

<h3 id="git-status"><a href="#git-status" class="headerlink" title="git status"></a>git status</h3><ul>
<li>作用：查看文件的状态</li>
</ul>
<ul>
<li>命令：<code>git status</code> <ul>
<li>红色表示工作区中的文件需要提交</li>
<li>绿色表示暂存区中的文件需要提交</li>
</ul>
</li>
<li>命令：<code>git stauts -s</code> 简化日志输出格式</li>
</ul>
<h3 id="git-log"><a href="#git-log" class="headerlink" title="git log"></a>git log</h3><ul>
<li>作用：查看提交日志</li>
<li><code>git log</code> 查看提交的日志</li>
<li><code>git log --oneline</code> 简洁的日志信息</li>
</ul>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/git/02-%E7%AC%94%E8%AE%B0/images/git01.png" alt=""></p>
<h2 id="git对比"><a href="#git对比" class="headerlink" title="git对比"></a>git对比</h2><h3 id="git-diff"><a href="#git-diff" class="headerlink" title="git diff"></a>git diff</h3><p><code>git diff</code>可以查看每次提交的内容的不同</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 查看工作区与暂存区的不同</span></span><br><span class="line">git diff</span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看暂存区与仓库区的不同</span></span><br><span class="line">git diff --cached</span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看工作区与仓库区的不同，HEAD表示最新的那次提交</span></span><br><span class="line">git diff HEAD</span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看两个版本之间的不同</span></span><br><span class="line">git diff c265262 de4845b</span><br></pre></td></tr></table></figure>

<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/git/02-%E7%AC%94%E8%AE%B0/images/git02.png" alt=""></p>
<h2 id="git重置"><a href="#git重置" class="headerlink" title="git重置"></a>git重置</h2><h3 id="git-reset"><a href="#git-reset" class="headerlink" title="git reset"></a>git reset</h3><ul>
<li>作用：版本回退，将代码恢复到已经提交的某一个版本中。</li>
<li><code>git reset --hard 版本号</code> 将代码回退到某个指定的版本(版本号只要有前几位即可)</li>
<li><code>git reset --hard head~1</code>将版本回退到上一次提交<ul>
<li>~1:上一次提交</li>
<li>~2:上上次提交</li>
<li>~0:当前提交</li>
</ul>
</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">关于参数 --hard的解释</span><br><span class="line">git reset 的参数可以是以下三个值：</span><br><span class="line">git reset --soft 版本号  ： 只重置仓库区</span><br><span class="line">git reset --mixed 版本号 ： 重置仓库区和暂存区【默认】</span><br><span class="line">git reset --hard  版本号 ： 重置仓库区和暂存区和工作区。</span><br><span class="line">git reset 版本号         : 效果与--mixed一致</span><br></pre></td></tr></table></figure>

<ul>
<li>当使用了<code>git reset</code>命令后，版本会回退，使用<code>git log</code>只能看到当前版本之前的信息。使用<code>git reflog</code>可以查看所有的版本信息</li>
</ul>
<h2 id="git忽视文件"><a href="#git忽视文件" class="headerlink" title="git忽视文件"></a>git忽视文件</h2><blockquote>
<p>在仓库中，有些文件是不想被git管理的，比如数据的配置密码、写代码的一些思路等。git可以通过配置从而达到忽视掉一些文件，这样这些文件就可以不用提交了。</p>
</blockquote>
<ul>
<li>在仓库的根目录创建一个<code>.gitignore</code>的文件，文件名是固定的。</li>
<li>将不需要被git管理的文件路径添加到<code>.gitignore</code>中</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 忽视idea.txt文件</span></span><br><span class="line">idea.txt</span><br><span class="line"></span><br><span class="line"><span class="comment"># 忽视.gitignore文件</span></span><br><span class="line">.gitignore</span><br><span class="line"></span><br><span class="line"><span class="comment"># 忽视css下的index.js文件</span></span><br><span class="line">css/index.js</span><br><span class="line"></span><br><span class="line"><span class="comment"># 忽视css下的所有的js文件</span></span><br><span class="line">css/*.js</span><br><span class="line"></span><br><span class="line"><span class="comment"># 忽视css下的所有文件</span></span><br><span class="line">css/*.*</span><br><span class="line"><span class="comment"># 忽视css文件夹</span></span><br><span class="line">css</span><br></pre></td></tr></table></figure>

<h1 id="git分支操作"><a href="#git分支操作" class="headerlink" title="git分支操作"></a>git分支操作</h1><p>分支就是科幻电影里面的平行宇宙，当你正在电脑前努力学习Git的时候，另一个你正在另一个平行宇宙里努力学习SVN。</p>
<p>如果两个平行宇宙互不干扰，那对现在的你也没啥影响。不过，在某个时间点，两个平行宇宙合并了，结果，你既学会了Git又学会了SVN！</p>
<p><img src="E:/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/git/02-%E7%AC%94%E8%AE%B0/images/fenzhi.png" alt=""></p>
<h2 id="为什么要有分支？"><a href="#为什么要有分支？" class="headerlink" title="为什么要有分支？"></a>为什么要有分支？</h2><ul>
<li>如果你要开发一个新的功能，需要2周时间，第一周你只能写50%代码，如果此时立即提交，代码没写完，不完整的代码会影响到别人无法工作。如果等代码写完再提交，代码很容易丢失，风险很大。</li>
<li>有了分支，你就可以创建一个属于自己的分支，别人看不到，也不影响别人，你在自己的分支上工作，提交到自己的分支上，等到功能开发完毕，一次性的合并到原来的分支。这样既安全，又不影响他人工作。</li>
<li>在工作过程中，经常会碰到<strong>多任务并行开发</strong> 的情况，使用分支就能很好的避免任务之间的影响。</li>
<li>其他版本工具比如svn，cvs中也有分支这个概念，但是这些工具中的分支操作非常的慢，形同摆设。</li>
</ul>
<h2 id="git分支命令"><a href="#git分支命令" class="headerlink" title="git分支命令"></a>git分支命令</h2><blockquote>
<p>在git中，分支实质上仅仅是一个指针，每次代码提交后，这个分支指针就会向后移动，保证一直指向最后一次提交的的版本。git中使用HEAD指向当前分支</p>
</blockquote>
<h3 id="创建分支"><a href="#创建分支" class="headerlink" title="创建分支"></a>创建分支</h3><ul>
<li><code>git branch 分支名称</code>创建分支，分支中的代码，在创建时与当前分支的内容完全相同。</li>
<li>git在第一次提交时，就有了一个叫<code>master</code>的主分支。</li>
<li><code>git branch dev</code>，创建了一个叫做dev的分支</li>
</ul>
<h3 id="查看分支"><a href="#查看分支" class="headerlink" title="查看分支"></a>查看分支</h3><ul>
<li><code>git branch</code>可以查看所有的分支，</li>
<li>在当前分支的前面会有一个<code>*</code></li>
<li>在git中，有一个特殊指针<code>HEAD</code>,永远会指向当前分支</li>
</ul>
<h3 id="切换分支"><a href="#切换分支" class="headerlink" title="切换分支"></a>切换分支</h3><ul>
<li><code>git checkout 分支名称</code>切换分支  HEAD指针指向了另一个分支</li>
<li>在当前分支的任何操作，都不会影响到其他的分支，除非进行了分支合并。</li>
<li>提交代码时，会生产版本号，当前分支会指向最新的版本号。</li>
</ul>
<h3 id="创建并切换分支"><a href="#创建并切换分支" class="headerlink" title="创建并切换分支"></a>创建并切换分支</h3><ul>
<li><code>git checkout -b 分支名称</code> 创建并切换分支</li>
<li>切换分支会做两件事情<ul>
<li>创建一个新分支</li>
<li>把head指针指向当前的分支</li>
</ul>
</li>
</ul>
<h3 id="删除分支"><a href="#删除分支" class="headerlink" title="删除分支"></a>删除分支</h3><ul>
<li><code>git branch -d 分支名称</code> 可以删除分支</li>
<li>注意：不能在当前分支删除当前分支，需要切换到其他分支才能删除。</li>
<li>注意：<code>master</code>分支是可以删除的，但是不推荐那么做。</li>
</ul>
<h3 id="合并分支"><a href="#合并分支" class="headerlink" title="合并分支"></a>合并分支</h3><ul>
<li><code>git merge 分支名称</code> 将其他分支的内容合并到当前分支。</li>
<li>在<code>master</code>分支中执行<code>git merge dev</code> 将<code>dev</code>分支中的代码合并到<code>master</code>分支</li>
<li><a href="https://git-scm.com/book/zh/v1/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%9A%84%E6%96%B0%E5%BB%BA%E4%B8%8E%E5%90%88%E5%B9%B6" target="_blank" rel="noopener">分支合并</a></li>
</ul>
<h2 id="git合并冲突"><a href="#git合并冲突" class="headerlink" title="git合并冲突"></a>git合并冲突</h2><ul>
<li>对于同一个文件，如果有多个分支需要合并时，容易出现冲突。</li>
<li>合并分支时，如果出现冲突，只能手动处理，再次提交，一般的作法，把自己的代码放到冲突代码的后面即可。</li>
</ul>
<h1 id="git远程仓库"><a href="#git远程仓库" class="headerlink" title="git远程仓库"></a>git远程仓库</h1><h2 id="github与git"><a href="#github与git" class="headerlink" title="github与git"></a>github与git</h2><p>git与github没有直接的关系。</p>
<ul>
<li>git是一个版本控制工具。</li>
<li>github是一个代码托管平台，开源社区，是git的一个远程代码仓库。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. gitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名gitHub。</span></span><br><span class="line"><span class="comment">//2. github免费，代码所有人都能看到，但是只有你自己能修改。付费的可以隐藏。</span></span><br><span class="line"><span class="comment">//3. 创建git项目时，不能有中文。</span></span><br></pre></td></tr></table></figure>

<p><a href="https://github.com/" target="_blank" rel="noopener">github官网</a></p>
<p><a href="https://git.oschina.net/" target="_blank" rel="noopener">开源中国-git</a></p>
<h2 id="git-clone"><a href="#git-clone" class="headerlink" title="git clone"></a>git clone</h2><ul>
<li>作用：克隆远程仓库的代码到本地</li>
<li>git clone [远程仓库地址]</li>
<li><code>git clone git://github.com/jepsongithub/test.git</code>会在本地新建一个<code>test</code>文件夹，在test中包含了一个<code>.git</code>目录，用于保存所有的版本记录，同时test文件中还有最新的代码，你可以直接进行后续的开发和使用。</li>
<li>git克隆默认会使用远程仓库的项目名字，也可以自己指定。需要是使用以下命令：<code>git clone [远程仓库地址] [本地项目名]</code></li>
</ul>
<h2 id="git-push"><a href="#git-push" class="headerlink" title="git push"></a>git push</h2><ul>
<li>作用：将本地仓库中代码提交到远程仓库</li>
<li><code>git push 仓库地址 master</code> 在代码提交到远程仓库，注意master分支必须写，不能省略</li>
<li>例子：<code>git push git@github.com:jepsongithub/test.git master</code> 如果第一次使用，需要填写github的用户名和密码</li>
</ul>
<h2 id="git-pull"><a href="#git-pull" class="headerlink" title="git pull"></a>git pull</h2><ul>
<li>作用：将远程的代码下载到本地</li>
</ul>
<ul>
<li>通常在push前，需要先pull一次。</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 获取远程仓库的更新，并且与本地的分支进行合并</span></span><br><span class="line">git pull</span><br></pre></td></tr></table></figure>

<h2 id="git-remote"><a href="#git-remote" class="headerlink" title="git remote"></a>git remote</h2><p>每次push操作都需要带上远程仓库的地址，非常的麻烦，我们可以给仓库地址设置一个别名</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 给远程仓库设置一个别名</span></span><br><span class="line">git remote add 仓库别名 仓库地址</span><br><span class="line">git remote add jepson git@github.com:jepsongithub/test.git</span><br><span class="line"></span><br><span class="line"><span class="comment"># 删除jepson这个别名</span></span><br><span class="line">git remote remove jepson</span><br><span class="line"></span><br><span class="line"><span class="comment"># git clone的仓库默认有一个origin的别名</span></span><br></pre></td></tr></table></figure>

<h2 id="SSH免密码登陆"><a href="#SSH免密码登陆" class="headerlink" title="SSH免密码登陆"></a>SSH免密码登陆</h2><p>git支持多种数据传输协议：</p>
<ul>
<li>https协议：<code>https://github.com/jepsongithub/test.git</code>  需要输入用户名和密码</li>
<li>ssh协议：<code>git@github.com:jepsongithub/test.git</code>   可以配置免密码登录</li>
</ul>
<p>每次push或者pull代码，如果使用https协议，那么都需要输入用户名和密码进行身份的确认，非常麻烦。</p>
<ul>
<li>github为了账户的安全，需要对每一次push请求都要验证用户的身份，只有合法的用户才可以push</li>
<li>使用ssh协议，配置ssh免密码，可以做到免密码往github推送代码</li>
</ul>
<h2 id="SSH免密码登录配置"><a href="#SSH免密码登录配置" class="headerlink" title="SSH免密码登录配置"></a>SSH免密码登录配置</h2><p>注意：这些命令需要在bash中敲</p>
<ul>
<li>1 创建SSH Key：<code>ssh-keygen -t rsa</code></li>
<li>2 在文件路径 <code>C:\用户\当前用户名\</code> 找到 <code>.ssh</code> 文件夹</li>
<li>3 文件夹中有两个文件：<ul>
<li>私钥：<code>id_rsa</code></li>
<li>公钥：<code>id_rsa.pub</code></li>
</ul>
</li>
<li>4 在 <code>github -&gt; settings -&gt; SSH and GPG keys</code>页面中，新创建SSH key</li>
<li>5 粘贴 公钥 <code>id_rsa.pub</code> 内容到对应文本框中</li>
<li>5 在github中新建仓库或者使用现在仓库，拿到<code>git@github.com:用户名/仓库名.git</code></li>
<li>6 此后，再次SSH方式与github“通信”，不用输入密码确认身份了</li>
</ul>
<h1 id="拓展-github-pages的使用"><a href="#拓展-github-pages的使用" class="headerlink" title="拓展: github-pages的使用"></a>拓展: github-pages的使用</h1><ol>
<li>github 允许创建一个非常特殊的一个仓库<code>用户名.github.io</code> 比如 <code>jiangpenger.github.io</code></li>
<li>clone下来新建index.html页面内容提交</li>
<li>访问<code>用户名.github.io</code> 即<code>jiangpenger.github.io</code></li>
</ol>

      
      
    </div>
    
    <div class="article-info article-info-index">
      
      

      
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-ajax" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2018/12/10/ajax/" class="article-date">
      <time datetime="2018-12-09T16:00:00.000Z" itemprop="datePublished">2018-12-10</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2018/12/10/ajax/">ajax</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>我们使用php动态渲染页面时，有很多比较麻烦的地方。</p>
<ul>
<li>在前端写好页面以后，需要后台进行修改，意味这后端程序员也需要懂前端的知识，其实渲染的工作应该交给前端来做。</li>
<li>前端没有写好页面的话，后端无法开始工作，需要等待前端的页面完成之后才能开始工作，拖延项目的进度。</li>
<li>这种渲染，属于同步渲染，先获取数据, 如果数据获取的慢了, 会严重影响整个页面渲染速度</li>
</ul>
<p>【演示：同步渲染】</p>
<h1 id="http-协议回顾"><a href="#http-协议回顾" class="headerlink" title="http 协议回顾"></a>http 协议回顾</h1><blockquote>
<p>HTTP协议，即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和服务器之间互相通信的规则</p>
<p>HTTP协议规定了<strong>请求</strong> 和<strong>响应</strong> 的标准</p>
</blockquote>
<h2 id="请求与请求报文"><a href="#请求与请求报文" class="headerlink" title="请求与请求报文"></a>请求与请求报文</h2><p><strong>get请求的请求报文详解</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//--------------------------请求行--------------------------------</span></span><br><span class="line"><span class="comment">// GET  请求方式</span></span><br><span class="line"><span class="comment">// /day02/01.php?username=pp&amp;password=123456    请求路径+参数（注意点）</span></span><br><span class="line"><span class="comment">// HTTP/1.1 HTTP的版本号</span></span><br><span class="line">GET /day02/<span class="number">01.</span>php?username=pp&amp;password=<span class="number">123456</span> HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//--------------------------请求头--------------------------------</span></span><br><span class="line">Host: www.study.com</span><br><span class="line">Connection: keep-alive</span><br><span class="line">Upgrade-Insecure-Requests: <span class="number">1</span></span><br><span class="line">User-Agent: Mozilla/<span class="number">5.0</span> (Windows NT <span class="number">10.0</span>; WOW64) AppleWebKit/<span class="number">537.36</span> (KHTML, like Gecko) Chrome/<span class="number">58.0</span><span class="number">.3029</span><span class="number">.96</span> Safari/<span class="number">537.36</span></span><br><span class="line">Accept: text/html,application/xhtml+xml,application/xml;q=<span class="number">0.9</span>,image/webp,<span class="string">`*/*`</span>;q=<span class="number">0.8</span></span><br><span class="line">Accept-Encoding: gzip, deflate, sdch</span><br><span class="line">Accept-Language: zh-CN,zh;q=<span class="number">0.8</span>,en;q=<span class="number">0.6</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//----------------------------请求体-------------------------------------</span></span><br><span class="line"><span class="comment">//get请求没有请求体，但是参数会拼接到请求行中</span></span><br></pre></td></tr></table></figure>



<p><strong>POST请求的请求报文</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//-----------------------请求行---------------------------------------------</span></span><br><span class="line">POST /day02/<span class="number">01.</span>php HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//-----------------------请求头--------------------------------------------</span></span><br><span class="line">Host: www.study.com</span><br><span class="line">Connection: keep-alive</span><br><span class="line"><span class="comment">//传递的参数的长度。</span></span><br><span class="line">Content-Length: <span class="number">29</span></span><br><span class="line">Cache-Control: max-age=<span class="number">0</span></span><br><span class="line">Origin: http:<span class="comment">//www.study.com</span></span><br><span class="line">Upgrade-Insecure-Requests: <span class="number">1</span></span><br><span class="line">User-Agent: Mozilla/<span class="number">5.0</span> (Windows NT <span class="number">10.0</span>; WOW64) AppleWebKit/<span class="number">537.36</span> (KHTML, like Gecko) Chrome/<span class="number">58.0</span><span class="number">.3029</span><span class="number">.96</span> Safari/<span class="number">537.36</span></span><br><span class="line"><span class="comment">//内容类型：表单数据，如果是post请求，必须指定这个属性。</span></span><br><span class="line">Content-Type: application/x-www-form-urlencoded</span><br><span class="line">Accept: text/html,application/xhtml+xml,application/xml;q=<span class="number">0.9</span>,image/webp,<span class="string">`*/*`</span>;q=<span class="number">0.8</span></span><br><span class="line">Referer: http:<span class="comment">//www.study.com/day02/01-login.html</span></span><br><span class="line">Accept-Encoding: gzip, deflate</span><br><span class="line">Accept-Language: zh-CN,zh;q=<span class="number">0.8</span>,en;q=<span class="number">0.6</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//------------------------请求体------------------------------------------</span></span><br><span class="line">username=pp&amp;password=<span class="number">123456</span></span><br></pre></td></tr></table></figure>

<p><strong>GET请求与POST请求的对比</strong> </p>
<ul>
<li>GET请求没有请求体，因为GET请求的参数拼接到地址栏中了</li>
<li>POST请求有请求体，就是传递的参数</li>
<li>POST请求需要指定content-type属性。</li>
</ul>
<h2 id="响应与响应报文"><a href="#响应与响应报文" class="headerlink" title="响应与响应报文"></a>响应与响应报文</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//---------------------状态行（响应行）-------------------------------</span></span><br><span class="line"><span class="comment">//HTTP/1.1  HTTP版本</span></span><br><span class="line"><span class="comment">//200 响应的状态</span></span><br><span class="line">	<span class="comment">//200表示成功</span></span><br><span class="line">	<span class="comment">//304表示读缓存</span></span><br><span class="line">	<span class="comment">//404表示找不到资源</span></span><br><span class="line">	<span class="comment">//500表示服务端错误</span></span><br><span class="line">HTTP/<span class="number">1.1</span> <span class="number">200</span> OK</span><br><span class="line"></span><br><span class="line"><span class="comment">//----------------------响应头-----------------------------------------------</span></span><br><span class="line"><span class="built_in">Date</span>: Thu, <span class="number">22</span> Jun <span class="number">2017</span> <span class="number">16</span>:<span class="number">51</span>:<span class="number">22</span> GMT</span><br><span class="line">Server: Apache/<span class="number">2.4</span><span class="number">.23</span> (Win32) OpenSSL/<span class="number">1.0</span><span class="number">.2</span>j PHP/<span class="number">5.4</span><span class="number">.45</span></span><br><span class="line">X-Powered-By: PHP/<span class="number">5.4</span><span class="number">.45</span></span><br><span class="line">Content-Length: <span class="number">18</span></span><br><span class="line">Keep-Alive: timeout=<span class="number">5</span>, max=<span class="number">100</span></span><br><span class="line">Connection: Keep-Alive</span><br><span class="line"><span class="comment">//内容类型，告诉浏览器该如何解析响应结果</span></span><br><span class="line">Content-Type: text/html;charset=utf<span class="number">-8</span></span><br><span class="line"><span class="comment">//-----------------------响应体------------------------------------------------</span></span><br><span class="line">hello world</span><br></pre></td></tr></table></figure>







<h1 id="AJAX"><a href="#AJAX" class="headerlink" title="AJAX"></a>AJAX</h1><blockquote>
<p>即 Asynchronous [e’sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。</p>
</blockquote>
<h2 id="同步与异步"><a href="#同步与异步" class="headerlink" title="同步与异步"></a>同步与异步</h2><p>同步和异步概念：</p>
<p>同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务</p>
<p>异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。</p>
<p>编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。</p>
<img src="E:/前端资料/ajax-01/ajax/img/01-茶水.png">

<p>网页异步应用：</p>
<ol>
<li>验证你的用户名是否已经存在（一边输入，一边获取你的信息，和后台比对）。</li>
<li>百度搜索提示，及相关内容展示（一边输入，一边找出了你可能要的内容）。</li>
<li>新浪微博评论（异步加载）。</li>
</ol>
<p>XMLHttpRequest可以以异步方式的请求数据处理程序,  可实现对网页的部分更新， 而不是刷新整个页面</p>
<h2 id="XMLHttpRequest对象"><a href="#XMLHttpRequest对象" class="headerlink" title="XMLHttpRequest对象"></a>XMLHttpRequest对象</h2><blockquote>
<p>浏览器内建对象，用于与服务器通信(交换数据) ，可以发送ajax请求。 由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步的，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">请求由客户端发起，其规范格式为：请求行、请求头、请求主体。</span><br></pre></td></tr></table></figure>

<img src="E:/前端资料/ajax-01/ajax/img/02-请求规范格式.png">



<h3 id="发送get请求"><a href="#发送get请求" class="headerlink" title="发送get请求"></a>发送get请求</h3><p>XMLHttpRequest以异步的方式发送HTTP请求，因此在发送请求时，一样需要遵循HTTP协议。</p>
<blockquote>
<p> 使用XMLHttpRequest发送get请求的步骤</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 创建一个XMLHttpRequest对象</span></span><br><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line"></span><br><span class="line"><span class="comment">//2. 设置请求行</span></span><br><span class="line"><span class="comment">// 第一个参数:请求方式  get/post</span></span><br><span class="line"><span class="comment">// 第二个参数:请求的地址 需要在url后面拼上参数列表</span></span><br><span class="line"><span class="comment">//	第三个参数：是否异步 默认true，可不写</span></span><br><span class="line">xhr.open(<span class="string">"get"</span>, <span class="string">"01.php?name=Jepson&amp;age18"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//3. 设置请求头</span></span><br><span class="line"><span class="comment">//请求头中可以设置Content-Type,用以说明请求主体的内容是如何编码,get请求时没有请求体,无需设置</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//4. 设置请求体</span></span><br><span class="line"><span class="comment">//send（请求体）</span></span><br><span class="line"><span class="comment">//get请求的请求体为空,因为参数列表拼接到url后面了</span></span><br><span class="line">xhr.send(<span class="literal">null</span>);</span><br></pre></td></tr></table></figure>

<p>注意点 :</p>
<ul>
<li>get请求,设置请求行时,需要把参数列表拼接到url后面</li>
<li>get请求不用设置请求头, 不用说明请求主体的编码方式</li>
<li>get请求的请求体为null</li>
</ul>
<h3 id="发送post请求"><a href="#发送post请求" class="headerlink" title="发送post请求"></a>发送post请求</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 设置请求行 post请求的参数列表在请求体</span></span><br><span class="line">xhr.open(<span class="string">"post"</span>, <span class="string">"02.php"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 设置请求头, post 请求必须要设置 content-type, 标记请求体内容的解析方式, 不然后端无法解析获取数据</span></span><br><span class="line">xhr.setRequestHeader( <span class="string">"content-type"</span>, <span class="string">"application/x-www-form-urlencoded"</span> );</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 设置请求体</span></span><br><span class="line">xhr.send( <span class="string">"name=Jepson&amp;age=18"</span> );</span><br></pre></td></tr></table></figure>

<p>注意点 :</p>
<ul>
<li>post请求, 设置请求行时, 不拼接参数列表</li>
<li>post必须设置请求头中的content-type为application/x-www-form-urlencoded, 标记请求体解析方式</li>
<li>post 请求需要将参数列表设置到请求体中</li>
</ul>
<h3 id="获取响应-readyState"><a href="#获取响应-readyState" class="headerlink" title="获取响应 readyState"></a>获取响应 readyState</h3><p>readyState:记录了XMLHttpRequest对象的当前状态</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">readyState有五种可能的值：</span><br><span class="line">xhr.readyState &#x3D; 0时，UNSENT open尚未调用</span><br><span class="line">xhr.readyState &#x3D; 1时，OPENED open已调用</span><br><span class="line">xhr.readyState &#x3D; 2时，HEADERS_RECEIVED 接收到响应头信息</span><br><span class="line">xhr.readyState &#x3D; 3时，LOADING 接收到响应主体</span><br><span class="line">xhr.readyState &#x3D; 4时，DONE 响应完成</span><br><span class="line"></span><br><span class="line">不用记忆状态，只需要了解有状态变化这个概念</span><br></pre></td></tr></table></figure>



<p>HTTP响应分为3个部分，状态行、响应头、响应体。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//给xhr注册一个onreadystatechange事件，当xhr的状态发生状态发生改变时，会触发这个事件。</span></span><br><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">if</span>(xhr.readyState == <span class="number">4</span>)&#123;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//1. 获取状态行</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"状态行:"</span>+xhr.status);<span class="comment">//200</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">//2. 获取响应头</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"所有的响应头:"</span>+xhr.getAllResponseHeaders());</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"指定响应头:"</span>+xhr.getResponseHeader(<span class="string">"content-type"</span>));</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//3. 获取响应体</span></span><br><span class="line">    <span class="built_in">console</span>.log(xhr.responseText);</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h3><p>【判断用户名是否存在】//in_array($content,$arr) 判断$content在$arr中是否存在，如果存在，输出true,否则false</p>
<p>【用户登录案例】</p>
<h2 id="数据交互"><a href="#数据交互" class="headerlink" title="数据交互"></a>数据交互</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">浏览器端只是负责用户的交互和数据的收集以及展示，真正的数据都是存储在服务器端的。</span><br><span class="line"></span><br><span class="line">我们现在通过ajax的确可以返回一些简单的数据（一个字符串）, </span><br><span class="line">但是在实际开发过程中，肯定会会设计到大量的复杂类型的数据传输，</span><br><span class="line">比如数组、对象等，但是每个编程语言的语法都不一样。</span><br><span class="line"></span><br><span class="line">因此我们会采用通过的数据交换格式（XML、JSON）来进行数据的交互。</span><br></pre></td></tr></table></figure>



<h3 id="XML-了解即可"><a href="#XML-了解即可" class="headerlink" title="XML(了解即可)"></a>XML(了解即可)</h3><p><strong>什么是XML</strong></p>
<ul>
<li>XML 指可扩展标记语言（EXtensible Markup Language）</li>
<li>XML 是一种标记语言，很类似 HTML</li>
<li>XML 的设计宗旨是传输数据，而非显示数据</li>
<li>XML 标签没有被预定义。您需要自行定义标签。</li>
</ul>
<p><strong>语法规范</strong></p>
<ul>
<li>第一行必须是版本信息</li>
<li>必须有一个根元素（有且仅有一个）</li>
<li>标签不可有空格、不可以数字或.开头、大小写敏感</li>
<li>不可交叉嵌套，都是双标签，如果是单标签，必须闭合</li>
<li>属性双引号（浏览器自动修正成双引号了）</li>
<li>特殊符号要使用实体</li>
<li>注释和HTML一样</li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8" ?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">students</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">student</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">name</span>&gt;</span>张三<span class="tag">&lt;/<span class="name">name</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">age</span>&gt;</span>18<span class="tag">&lt;/<span class="name">age</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">gender</span>&gt;</span>男<span class="tag">&lt;/<span class="name">gender</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">desc</span>&gt;</span>路人甲<span class="tag">&lt;/<span class="name">desc</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">student</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">student</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">name</span>&gt;</span>李四<span class="tag">&lt;/<span class="name">name</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">age</span>&gt;</span>20<span class="tag">&lt;/<span class="name">age</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">gender</span>&gt;</span>男<span class="tag">&lt;/<span class="name">gender</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">desc</span>&gt;</span>路人乙<span class="tag">&lt;/<span class="name">desc</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">student</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">students</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>php获取xml文件的内容</strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注意: 如果需要返回 xml 数据, 需要将 content-type 改成 text/xml, 不然浏览器以 text/html 解析</span></span><br><span class="line">header( <span class="string">'content-type:text/xml;charset=utf-8'</span> );</span><br><span class="line"><span class="comment">// file_get_content 用于获取文件的内容</span></span><br><span class="line"><span class="comment">// 参数: 文件的路径</span></span><br><span class="line">$result = file_get_content( <span class="string">"data.xml"</span> );</span><br><span class="line"><span class="keyword">echo</span> $result;</span><br></pre></td></tr></table></figure>

<p><strong>js解析xml</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取服务端返回的xml数据，需要使用xhr.responseXML，这是一个document对象，可以使用DOM中的方法查找元素。</span></span><br><span class="line"><span class="keyword">var</span> data = xhr.responseXML;</span><br><span class="line"><span class="comment">//获取所有的学生</span></span><br><span class="line"><span class="keyword">var</span> students = data.querySelectorAll(<span class="string">"student"</span>);</span><br></pre></td></tr></table></figure>

<p>缺点：虽然可以描述和传输复杂数据，但是其解析过于复杂,  并且体积较大，所以实现开发已经很少使用了。</p>
<h3 id="JSON数据"><a href="#JSON数据" class="headerlink" title="JSON数据"></a>JSON数据</h3><p>JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript 规范，采用独立于编程语言的文本格式来存储和表示数据。</p>
<ul>
<li>数据在 键值对 中</li>
<li>数据由逗号分隔(最后一个 键值对 不能带逗号)</li>
<li>花括号保存对象，方括号保存数组</li>
<li>键使用双引号</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">a</span>: <span class="string">'Hello'</span>, <span class="attr">b</span>: <span class="string">'World'</span>&#125;; <span class="comment">//这是一个对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这是一个 JSON 字符串，本质是一个字符串</span></span><br><span class="line"><span class="keyword">var</span> json = <span class="string">'&#123;"a": "Hello", "b": "World"&#125;'</span>;</span><br></pre></td></tr></table></figure>

<p><strong>JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，解析完成后就能很方便的使用了</strong></p>
<h4 id="php处理json"><a href="#php处理json" class="headerlink" title="php处理json"></a>php处理json</h4><ul>
<li>php关联数组 ==&gt;  json   ( json_encode )</li>
</ul>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// php的关联数组</span></span><br><span class="line">$obj = <span class="keyword">array</span>(</span><br><span class="line">  <span class="string">"a"</span> =&gt; <span class="string">"hello"</span>,</span><br><span class="line">  <span class="string">"b"</span> =&gt; <span class="string">"world"</span>,</span><br><span class="line">  <span class="string">"name"</span> =&gt; <span class="string">"鹏鹏"</span></span><br><span class="line">);</span><br><span class="line"><span class="comment">//json字符串</span></span><br><span class="line">$json = json_encode( $obj );</span><br><span class="line"><span class="keyword">echo</span> $json;</span><br></pre></td></tr></table></figure>

<ul>
<li>json ==&gt; php对象/关联数组    ( json_decode )</li>
</ul>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">$json = <span class="string">'&#123;"a": "Hello", "b": "World"&#125;'</span>;<span class="comment">//json字符串</span></span><br><span class="line"><span class="comment">//第一个参数：json字符串</span></span><br><span class="line"><span class="comment">//第二个参数：</span></span><br><span class="line"><span class="comment">//false，将json转换成对象(默认)</span></span><br><span class="line"><span class="comment">//true：将json转换成数组(推荐)</span></span><br><span class="line">$obj = json_decode($json,<span class="keyword">true</span>);</span><br><span class="line"><span class="keyword">echo</span> $obj[<span class="string">'a'</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">//通过json文件获取到的内容就是一个json字符串。</span></span><br><span class="line">$data = file_get_contents(<span class="string">"data.json"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//将json转换成数组</span></span><br><span class="line">$result = json_decode($data, <span class="keyword">true</span>);</span><br><span class="line">print_r($result);</span><br></pre></td></tr></table></figure>




<h4 id="JS处理json"><a href="#JS处理json" class="headerlink" title="JS处理json"></a>JS处理json</h4><ul>
<li>JS对象 ==&gt; JSON字符串 JSON.stringify(obj)</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//obj是一个js对象</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">a</span>: <span class="string">'Hello'</span>, <span class="attr">b</span>: <span class="string">'World'</span>&#125;</span><br><span class="line"><span class="comment">//result就变成了一个json字符串了</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">JSON</span>.stringify(obj);<span class="comment">// '&#123;"a": "Hello", "b": "World"&#125;'</span></span><br></pre></td></tr></table></figure>


<ul>
<li>JSON字符串 ==&gt; JS对象  JSON.parse(obj)</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//json是一个json字符串</span></span><br><span class="line"><span class="keyword">var</span> json = <span class="string">'&#123;"a": "Hello", "b": "World"&#125;'</span>;</span><br><span class="line"><span class="comment">//obj就变成了一个js对象</span></span><br><span class="line"><span class="keyword">var</span> obj = <span class="built_in">JSON</span>.parse(json);<span class="comment">// &#123;a: 'Hello', b: 'World'&#125;</span></span><br></pre></td></tr></table></figure>



<p>使用json进行数据传输</p>
<p>思考：</p>
<ol>
<li>js有一个对象，如何发送到php后台</li>
<li>php中有一个对象，如何发送到前台。</li>
</ol>
<p>【案例：获取表格数据.html】</p>
<h2 id="兼容性处理-了解-不用处理"><a href="#兼容性处理-了解-不用处理" class="headerlink" title="兼容性处理 (了解, 不用处理)"></a>兼容性处理 (了解, 不用处理)</h2><p>现在一般最多兼容到 IE8,  这里以后见到了知道是在处理兼容性就行了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xhr = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">if</span>(XMLHttpRequest)&#123;</span><br><span class="line">  <span class="comment">//现代浏览器 IE7+</span></span><br><span class="line">  xhr = <span class="keyword">new</span>  XMLHttpRequest();</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">  <span class="comment">//老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：</span></span><br><span class="line">  xmlHttp = <span class="keyword">new</span> ActiveXObject(<span class="string">"Microsoft.XMLHTTP"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="封装ajax工具函数"><a href="#封装ajax工具函数" class="headerlink" title="封装ajax工具函数"></a>封装ajax工具函数</h2><blockquote>
<p>每次发送ajax请求，其实步骤都是一样的，重复了大量代码，我们完全可以封装成一个工具函数。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 创建xhr对象</span></span><br><span class="line"><span class="comment">//2. 设置请求行</span></span><br><span class="line"><span class="comment">//3. 设置请求头</span></span><br><span class="line"><span class="comment">//3. 设置请求体</span></span><br><span class="line"><span class="comment">//4. 监听响应状态</span></span><br><span class="line"><span class="comment">//5. 获取响应内容</span></span><br></pre></td></tr></table></figure>

<h3 id="参数提取"><a href="#参数提取" class="headerlink" title="参数提取"></a>参数提取</h3><table>
<thead>
<tr>
<th>参数名</th>
<th>参数类型</th>
<th>描述</th>
<th>传值</th>
<th>默认值</th>
</tr>
</thead>
<tbody><tr>
<td>type</td>
<td>string</td>
<td>请求方式</td>
<td>get/post</td>
<td>只要不传post，就是get</td>
</tr>
<tr>
<td>url</td>
<td>string</td>
<td>请求地址</td>
<td>接口地址</td>
<td>如果不传地址，不发送请求</td>
</tr>
<tr>
<td>async</td>
<td>boolean</td>
<td>是否异步</td>
<td>true/fase</td>
<td>只要不传false，那就是true，异步请求</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>请求数据</td>
<td><code>{key:value,key1:value2}</code></td>
<td>需要把这个对象拼接成参数的格式 uname=hucc&amp;upass=12345</td>
</tr>
<tr>
<td>dataType</td>
<td>string</td>
<td>返回的数据类型</td>
<td>xml/json/text</td>
<td>text</td>
</tr>
<tr>
<td>success</td>
<td>function</td>
<td>响应成功时调用</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>error</td>
<td>function</td>
<td>响应失败时调用</td>
<td>-</td>
<td>-</td>
</tr>
</tbody></table>
<h3 id="参数检测"><a href="#参数检测" class="headerlink" title="参数检测"></a>参数检测</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 要求参数obj必须传递，否则直接不发送请求</span></span><br><span class="line"><span class="keyword">if</span>(!obj || <span class="keyword">typeof</span> obj !== <span class="string">"object"</span>)&#123;</span><br><span class="line">  <span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 如果type传递的是post，那就发送post请求，否则发送get请求</span></span><br><span class="line"><span class="keyword">var</span> type = obj.type == <span class="string">"post"</span>?<span class="string">"post"</span>:<span class="string">'get'</span>;</span><br><span class="line"><span class="keyword">var</span> url = obj.url;</span><br><span class="line"><span class="keyword">if</span>(!url)&#123;</span><br><span class="line">  <span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 只有当async传递了false，才会发送同步请求，不然只发送异步请求</span></span><br><span class="line"><span class="keyword">var</span> <span class="keyword">async</span> = obj.async == <span class="literal">false</span>? <span class="literal">false</span>:<span class="literal">true</span>;</span><br></pre></td></tr></table></figure>



<h3 id="完整版本"><a href="#完整版本" class="headerlink" title="完整版本"></a>完整版本</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> $ = &#123;</span><br><span class="line">  ajax: <span class="function"><span class="keyword">function</span> (<span class="params">options</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//如果options参数没有传递，直接返回。</span></span><br><span class="line">    <span class="keyword">if</span> (!options || <span class="keyword">typeof</span> options !== <span class="string">"object"</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//处理默认参数</span></span><br><span class="line">    <span class="comment">//如果参数不是post，那就默认为get</span></span><br><span class="line">    <span class="keyword">var</span> type = options.type == <span class="string">"post"</span> ? <span class="string">"post"</span> : <span class="string">"get"</span>;</span><br><span class="line">    <span class="comment">//如果没有传url，那就传当前地址</span></span><br><span class="line">    <span class="keyword">var</span> url = options.url || location.pathname;</span><br><span class="line">    <span class="comment">//如果参数不是false，那就默认是true，发异步请求</span></span><br><span class="line">    <span class="keyword">var</span> <span class="keyword">async</span> = options.async == <span class="literal">false</span> ? <span class="literal">false</span> : <span class="literal">true</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">var</span> params = <span class="keyword">this</span>.getParams(options.data);</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//设置请求行</span></span><br><span class="line">    <span class="keyword">if</span> (type == <span class="string">"get"</span>) &#123;</span><br><span class="line">      url = url + <span class="string">"?"</span> + params;</span><br><span class="line">    &#125;</span><br><span class="line">    xhr.open(type, url, <span class="keyword">async</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//设置请求头</span></span><br><span class="line">    <span class="keyword">if</span> (type == <span class="string">"post"</span>) &#123;</span><br><span class="line">      xhr.setRequestHeader(<span class="string">"content-type"</span>, <span class="string">"application/x-www-form-urlencoded"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//设置请求参数</span></span><br><span class="line">    xhr.send(params);</span><br><span class="line">    </span><br><span class="line">    xhr.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">if</span> (xhr.readyState == <span class="number">4</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (xhr.status == <span class="number">200</span>) &#123;</span><br><span class="line">          <span class="comment">/*根据响应头的content-type属性指定方法接收到的内容*/</span></span><br><span class="line">          <span class="keyword">var</span> contentType = xhr.getResponseHeader(<span class="string">'content-type'</span>);</span><br><span class="line">          <span class="keyword">var</span> data = <span class="literal">null</span>;</span><br><span class="line">          <span class="keyword">if</span> (contentType.indexOf(<span class="string">'json'</span>) &gt; <span class="number">-1</span>) &#123;</span><br><span class="line">            data = <span class="built_in">JSON</span>.parse(xhr.responseText);</span><br><span class="line">          &#125; <span class="keyword">else</span> <span class="keyword">if</span> (contentType.indexOf(<span class="string">'xml'</span>) &gt; <span class="number">-1</span>) &#123;</span><br><span class="line">            data = xhr.responseXML;</span><br><span class="line">          &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            data = xhr.responseText;</span><br><span class="line">          &#125;</span><br><span class="line">          <span class="comment">/*执行成功函数*/</span></span><br><span class="line">          options.success &amp;&amp; options.success(data);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          options.error &amp;&amp; options.error(xhr.responseText);</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  getParams: <span class="function"><span class="keyword">function</span> (<span class="params">obj</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//将obj对象转换成参数</span></span><br><span class="line">    <span class="comment">//将对象转换成参数列表</span></span><br><span class="line">    <span class="keyword">if</span> (!obj) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> arr = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> obj) &#123;</span><br><span class="line">      arr.push(k + <span class="string">"="</span> + obj[k]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr.join(<span class="string">"&amp;"</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>【登录案例】</p>
<h2 id="jQuery中的ajax方法"><a href="#jQuery中的ajax方法" class="headerlink" title="jQuery中的ajax方法"></a>jQuery中的ajax方法</h2><blockquote>
<p>jQuery为我们提供了更强大的Ajax封装</p>
</blockquote>
<h3 id="ajax"><a href="#ajax" class="headerlink" title="$.ajax"></a>$.ajax</h3><p>参数列表</p>
<table>
<thead>
<tr>
<th>参数名称</th>
<th>描述</th>
<th>取值</th>
<th>示例</th>
</tr>
</thead>
<tbody><tr>
<td>url</td>
<td>接口地址</td>
<td></td>
<td>url:”02.php”</td>
</tr>
<tr>
<td>type</td>
<td>请求方式</td>
<td>get/post</td>
<td>type:”get”</td>
</tr>
<tr>
<td>timeout</td>
<td>超时时间</td>
<td>单位毫秒</td>
<td>timeout:5000</td>
</tr>
<tr>
<td>dataType</td>
<td>服务器返回的格式</td>
<td>json/xml/text(默认)</td>
<td>dataType:”json”</td>
</tr>
<tr>
<td>data</td>
<td>发送的请求数据</td>
<td>对象</td>
<td>data:{name:”zs”, age:18}</td>
</tr>
<tr>
<td>beforeSend</td>
<td>调用前的回调函数</td>
<td>function(){}</td>
<td>beforeSend:function(){ alert(1) }</td>
</tr>
<tr>
<td>success</td>
<td>成功的回调函数</td>
<td>function (data) {}</td>
<td>success:function (data) {}</td>
</tr>
<tr>
<td>error</td>
<td>失败的回调函数</td>
<td>function (error) {}</td>
<td>error:function(data) {}</td>
</tr>
<tr>
<td>complete</td>
<td>完成后的回调函数</td>
<td>function () {}</td>
<td>complete:function () {}</td>
</tr>
</tbody></table>
<p>使用示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line">  type:<span class="string">"get"</span>,<span class="comment">//请求类型</span></span><br><span class="line">  url:<span class="string">"02.php"</span>,<span class="comment">//请求地址</span></span><br><span class="line">  data:&#123;<span class="attr">name</span>:<span class="string">"zs"</span>, <span class="attr">age</span>:<span class="number">18</span>&#125;,<span class="comment">//请求数据</span></span><br><span class="line">  dataType:<span class="string">"json"</span>,<span class="comment">//希望接受的数据类型</span></span><br><span class="line">  timeout:<span class="number">5000</span>,<span class="comment">//设置超时时间</span></span><br><span class="line">  beforeSend:<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//alert("发送前调用");</span></span><br><span class="line">  &#125;,</span><br><span class="line">  success:<span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//alert("成功时调用");</span></span><br><span class="line">    <span class="built_in">console</span>.log(data);</span><br><span class="line">  &#125;,</span><br><span class="line">  error:<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//alert("失败时调用");</span></span><br><span class="line">    <span class="built_in">console</span>.log(error);</span><br><span class="line">  &#125;,</span><br><span class="line">  complete:<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//alert("请求完成时调用");</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>【案例：登录案例.html】</p>
<h3 id="其他api-了解"><a href="#其他api-了解" class="headerlink" title="其他api(了解)"></a>其他api(了解)</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$.post(url, callback, [dataType]);只发送post请求</span></span><br><span class="line"><span class="comment">//$.get(url, callback, [dataType]);</span></span><br><span class="line"><span class="comment">//$.getJSON(url, callback);</span></span><br><span class="line"><span class="comment">//$.getScript(url,callback);//载入服务器端的js文件</span></span><br><span class="line"><span class="comment">//$("div").load(url);//载入一个服务器端的html页面。</span></span><br></pre></td></tr></table></figure>





<h3 id="接口化开发"><a href="#接口化开发" class="headerlink" title="接口化开发"></a>接口化开发</h3><p>请求地址即所谓的接口，通常我们所说的接口化开发，其实是指一个接口对应一个功能， 并且严格约束了<strong>请求参数</strong> 和<strong>响应结果</strong> 的格式，这样前后端在开发过程中，可以减少不必要的讨论， 从而并行开发，可以极大的提升开发效率，另外一个好处，当网站进行改版后，服务端接口进行调整时，并不影响到前端的功能。</p>
<h4 id="获取短信验证码"><a href="#获取短信验证码" class="headerlink" title="获取短信验证码"></a>获取短信验证码</h4><p><strong>需求文档(产品)</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">总需求：点击获取验证码按钮，向服务端发送请求, 调用服务器端短信接口, 服务器端根据传参, 调用第三方短信接口, 给手机发送验证码</span><br><span class="line"></span><br><span class="line">需求<span class="number">1</span>：格式校验</span><br><span class="line">(<span class="number">1</span>) 手机号码不能为空   如果为空提示<span class="string">"手机号不能为空"</span></span><br><span class="line">(<span class="number">2</span>) 手机号码格式必须正确, 提示<span class="string">"请输入正确的手机号码"</span></span><br><span class="line">  </span><br><span class="line">需求<span class="number">2</span>：点击发送时，按钮显示为<span class="string">"发送中"</span>,并且不能重复提交请求</span><br><span class="line"></span><br><span class="line">需求<span class="number">3</span>：根据不同的响应结果，进行响应。</span><br><span class="line">(<span class="number">1</span>)如果接口调用成功</span><br><span class="line">   如果响应代码为<span class="number">100</span>，倒计时</span><br><span class="line">   如果响应代码为<span class="number">101</span>，提示手机号重复</span><br><span class="line">(<span class="number">2</span>)如果接口调用失败，告诉用户<span class="string">"服务器繁忙，请稍候再试"</span></span><br></pre></td></tr></table></figure>

<p><strong>接口文档</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">接口说明：获取短信验证码</span><br><span class="line">接口地址：getCode.php</span><br><span class="line">请求方式：<span class="keyword">get</span></span><br><span class="line">接口传参：mobile 手机号</span><br><span class="line">返回类型  json</span><br><span class="line">接口返回：&#123;</span><br><span class="line">			<span class="string">"code"</span>:<span class="string">"101"</span>, </span><br><span class="line">			<span class="string">"msg"</span>:<span class="string">"手机号码存在"</span>, </span><br><span class="line">			<span class="string">"mobile"</span>:<span class="string">"18511249258"</span></span><br><span class="line">		&#125;</span><br><span class="line">参数说明: code 当前业务逻辑的处理成功失败的标识  <span class="number">100</span>:成功   <span class="number">101</span>:手机号码存在</span><br><span class="line">		 msg  当前系统返回给前端提示</span><br><span class="line">		 mobile  当前的手机号码</span><br></pre></td></tr></table></figure>



<h4 id="注册接口"><a href="#注册接口" class="headerlink" title="注册接口"></a>注册接口</h4><p><strong>表单序列化</strong> serialize</p>
<p>jquery提供了一个<code>serialize()</code>方法序列化表单，说白就是将表单中带有name属性的所有参数拼成一个格式为<code>name=value&amp;name1=value1</code>这样的字符串。方便我们获取表单的数据。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//serialize将表单参数序列化成一个字符串。必须指定name属性</span></span><br><span class="line"><span class="comment">//name=pp&amp;pass=123456&amp;repass=123456&amp;mobile=15751776629&amp;code=1234</span></span><br><span class="line">$(<span class="string">'form'</span>).serialize();</span><br></pre></td></tr></table></figure>

<p>jquery的ajax方法，data参数能够直接识别表单序列化的数据</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$.post(&#123;</span><br><span class="line">  url:<span class="string">"register.php"</span>,</span><br><span class="line">  data:$(<span class="string">'form'</span>).serialize(),</span><br><span class="line">  dataType:<span class="string">'json'</span>,</span><br><span class="line">  success:<span class="function"><span class="keyword">function</span> (<span class="params">info</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(info);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<p><strong>需求文档</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">注册功能</span><br><span class="line">总需求：点击注册按钮，向服务端发送请求</span><br><span class="line"></span><br><span class="line">需求<span class="number">1</span>:表单校验</span><br><span class="line">    <span class="number">1.1</span> 用户名不能为空，否则提示<span class="string">"请输入用户名"</span></span><br><span class="line">    <span class="number">1.2</span> 密码不能为空，否则提示<span class="string">"请输入密码"</span></span><br><span class="line">    <span class="number">1.3</span> 确认密码必须与密码一直，否则提示<span class="string">"确认密码与密码不一致"</span></span><br><span class="line">    <span class="number">1.4</span> 手机号码不能为空，否则提示<span class="string">"请输入手机号码"</span>;</span><br><span class="line">    <span class="number">1.5</span> 手机号码格式必须正确，否则提示<span class="string">"手机号格式错误"</span></span><br><span class="line">    <span class="number">1.6</span> 短信验证码必须是<span class="number">4</span>位的数字，否则提示<span class="string">"验证码格式错误"</span></span><br><span class="line">      </span><br><span class="line">需求<span class="number">2</span>：点击注册按钮时，按钮显示为<span class="string">"注册中..."</span>,并且不能重复提交请求</span><br><span class="line"></span><br><span class="line">需求<span class="number">3</span>：根据不同响应结果，处理响应</span><br><span class="line">	<span class="number">3.1</span> 接口调用成功</span><br><span class="line">        <span class="number">100</span> 提示用户注册成功，<span class="number">3</span>s后跳转到首页</span><br><span class="line">        <span class="number">101</span> 提示用户<span class="string">"用户名jepson已经存在"</span></span><br><span class="line">        <span class="number">102</span> 提示用户<span class="string">"验证码错误"</span></span><br><span class="line">    <span class="number">3.2</span> 接口调用失败，提示<span class="string">"服务器繁忙，请稍后再试"</span>,恢复按钮的值</span><br></pre></td></tr></table></figure>

<p><strong>接口文档</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">接口说明：注册</span><br><span class="line">接口地址：register.php</span><br><span class="line">请求方式：post</span><br><span class="line">接口传参：name:用户名 pass:密码 code:验证码  mobile:手机号</span><br><span class="line">返回类型  json</span><br><span class="line">接口返回：&#123;</span><br><span class="line">			<span class="string">"code"</span>:<span class="string">"100"</span>,</span><br><span class="line">			<span class="string">"msg"</span>:<span class="string">"注册成功"</span>,</span><br><span class="line">			<span class="string">"name"</span>:<span class="string">"Jepson"</span></span><br><span class="line">		&#125;</span><br><span class="line">参数说明:</span><br><span class="line">      code 当前业务逻辑的处理成功失败的标识  <span class="number">100</span>:成功  <span class="number">101</span>:用户存在 <span class="number">102</span>:验证码错误</span><br><span class="line">      msg  当前系统返回给前端提示</span><br><span class="line">      name: 注册的用户名</span><br></pre></td></tr></table></figure>





<h1 id="模板引擎"><a href="#模板引擎" class="headerlink" title="模板引擎"></a>模板引擎</h1><blockquote>
<p>是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。</p>
</blockquote>
<h2 id="为什么要使用模板引擎"><a href="#为什么要使用模板引擎" class="headerlink" title="为什么要使用模板引擎"></a>为什么要使用模板引擎</h2><p>我们通过ajax获取到数据后，需要把数据渲染到页面，在学习模板引擎前，我们的做法是大量的拼接字符串，对于结构简单的页面，这么做还行 </p>
<p>但是如果页面结构很复杂，使用拼串的话<strong>代码可阅读性非常的差，而且非常容易出错，后期代码维护也是相当的麻烦。</strong> </p>
<p>【演示：使用拼串进行渲染的缺点.html】</p>
<p>总结来说拼串渲染两大缺点：</p>
<ol>
<li>js中大量充斥着 html 结构拼串代码， 很冗余， 可读性差</li>
<li>字符串拼接很麻烦， 且维护起来也很麻烦， 容易出错</li>
</ol>
<h2 id="常见的模板引擎"><a href="#常见的模板引擎" class="headerlink" title="常见的模板引擎"></a>常见的模板引擎</h2><p>BaiduTemplate：<a href="http://tangram.baidu.com/BaiduTemplate/" target="_blank" rel="noopener">http://tangram.baidu.com/BaiduTemplate/</a><br>velocity.js：<a href="https://github.com/shepherdwind/velocity.js/" target="_blank" rel="noopener">https://github.com/shepherdwind/velocity.js/</a><br>ArtTemplate：<a href="https://github.com/aui/artTemplate" target="_blank" rel="noopener">https://github.com/aui/artTemplate</a></p>
<p>artTemplate是使用最广泛，效率最高的模板引擎，需要大家掌握。</p>
<h2 id="artTemplate的使用"><a href="#artTemplate的使用" class="headerlink" title="artTemplate的使用"></a>artTemplate的使用</h2><p><a href="https://github.com/aui/art-template" target="_blank" rel="noopener">github地址</a></p>
<p><a href="https://aui.github.io/art-template/docs/" target="_blank" rel="noopener">中文api地址</a></p>
<h3 id="artTemplate入门"><a href="#artTemplate入门" class="headerlink" title="artTemplate入门"></a>artTemplate入门</h3><p><strong>1.引入模板引擎的js文件</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">"template-web.js"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>2.准备模板</strong> </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">  指定了type为text/html后，这一段script标签并不会解析，也不会显示。</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/html"</span> <span class="attr">id</span>=<span class="string">"myTmp"</span>&gt;</span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>姓名：隔壁老王<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>年龄：18<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>技能：查水表<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>描述：年轻力气壮<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>3.准备数据</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//3. 准备数据,数据是后台获取的，可以随时变化</span></span><br><span class="line"><span class="keyword">var</span> json = &#123;</span><br><span class="line">  userName:<span class="string">"隔壁老王"</span>,</span><br><span class="line">  age:<span class="number">18</span>,</span><br><span class="line">  skill:<span class="string">"查水表"</span>,</span><br><span class="line">  desc:<span class="string">"年轻气壮"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>4.将模板与数据进行绑定</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第一个参数：模板的id</span></span><br><span class="line"><span class="comment">//第二个参数：数据</span></span><br><span class="line"><span class="comment">//返回值：根据模板生成的字符串。</span></span><br><span class="line"><span class="keyword">var</span> html = template(<span class="string">"myTmp"</span>, json);</span><br><span class="line"><span class="built_in">console</span>.log(html);</span><br></pre></td></tr></table></figure>

<p><strong>5.修改模板</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/html"</span> <span class="attr">id</span>=<span class="string">"myTmp"</span>&gt;</span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>姓名：</span><span class="template-variable">&#123;&#123;userName&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>年龄：</span><span class="template-variable">&#123;&#123;age&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>技能：</span><span class="template-variable">&#123;&#123;skill&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>描述：</span><span class="template-variable">&#123;&#123;desc&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p><strong>6.将数据显示到页面</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">"div"</span>);</span><br><span class="line">div.innerHTML = html;</span><br></pre></td></tr></table></figure>



<h3 id="artTemplate标准语法"><a href="#artTemplate标准语法" class="headerlink" title="artTemplate标准语法"></a>artTemplate标准语法</h3><p><strong>if语法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123;if gender='男'&#125;&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"man"</span>&gt;</span></span><br><span class="line">&#123;&#123;else&#125;&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"woman"</span>&gt;</span></span><br><span class="line">&#123;&#123;/if&#125;&#125;</span><br></pre></td></tr></table></figure>

<p><strong>each语法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">  1. &#123;&#123;each data&#125;&#125;  可以通过$value 和 $index获取值和下标</span></span><br><span class="line"><span class="comment">  2. &#123;&#123;each data v i&#125;&#125;  自己指定值为v，下标为i</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line">&#123;&#123;each data v i&#125;&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&#123;&#123;v.url&#125;&#125;"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"&#123;&#123;v.src&#125;&#125;"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;v.content&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">&#123;&#123;/each&#125;&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//如果返回的数据是个数组，必须使用对象进行包裹，因为在&#123;&#123;&#125;&#125;中只写书写对象的属性。</span></span><br><span class="line"><span class="keyword">var</span> html = template(<span class="string">"navTmp"</span>, &#123;<span class="attr">data</span>:info&#125;);</span><br></pre></td></tr></table></figure>





<h1 id="瀑布流案例"><a href="#瀑布流案例" class="headerlink" title="瀑布流案例"></a>瀑布流案例</h1><h2 id="封装jQuery瀑布流插件"><a href="#封装jQuery瀑布流插件" class="headerlink" title="封装jQuery瀑布流插件"></a>封装jQuery瀑布流插件</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//特点分析：</span></span><br><span class="line"><span class="comment">//1. 跟以前将的瀑布流不一样的是，这次的瀑布流固定版心为1200px</span></span><br><span class="line"><span class="comment">//2. 瀑布流固定摆放5列，每一列的宽度固定为232px。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//思路分析：</span></span><br><span class="line"><span class="comment">//1. 计算每一列之间的缝隙</span></span><br><span class="line"><span class="comment">//2. 初始化一个数组，用户存储每一列的高度 [0,0,0,0,0]</span></span><br><span class="line"><span class="comment">//3. 查找数组的最小列，每次都把图片定位到最小列的位置</span></span><br><span class="line"><span class="comment">//4. 更新数组最小列的高度（加上定位过来的图片的高度）</span></span><br></pre></td></tr></table></figure>



<p>代码参考：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">$.fn.waterfall = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> $box = $(<span class="keyword">this</span>);</span><br><span class="line">  <span class="keyword">var</span> $item = $box.children();</span><br><span class="line">  <span class="keyword">var</span> boxWidth = $box.width();<span class="comment">//父盒子的宽度</span></span><br><span class="line">  <span class="keyword">var</span> itemWidth = <span class="number">232</span>;<span class="comment">//每个盒子固定宽度为232</span></span><br><span class="line">  <span class="keyword">var</span> columns = <span class="number">5</span>;<span class="comment">//固定摆放5列</span></span><br><span class="line">  <span class="keyword">var</span> gap = (boxWidth - columns * itemWidth) / (columns - <span class="number">1</span>);<span class="comment">//缝隙的宽度 10</span></span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>]; <span class="comment">//初始化数组</span></span><br><span class="line">  $item.each(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//查找最小列</span></span><br><span class="line">    <span class="keyword">var</span> min = arr[<span class="number">0</span>];</span><br><span class="line">    <span class="keyword">var</span> minIndex = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">      <span class="keyword">if</span> (min &gt; arr[i]) &#123;</span><br><span class="line">        min = arr[i];</span><br><span class="line">        minIndex = i;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//设置位置</span></span><br><span class="line">    $(<span class="keyword">this</span>).css(&#123;</span><br><span class="line">      left: minIndex * (itemWidth + gap),</span><br><span class="line">      top: min</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">//更新数组</span></span><br><span class="line">    arr[minIndex] = min + $(<span class="keyword">this</span>).outerHeight() + gap;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="瀑布流完整版"><a href="#瀑布流完整版" class="headerlink" title="瀑布流完整版"></a>瀑布流完整版</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//需求分析：</span></span><br><span class="line"><span class="comment">//1. 页面刚开始，没有任何一张图片。因此需要从通过ajax获取图片</span></span><br><span class="line"><span class="comment">//2. 使用模版引擎将获取到的数据渲染到页面</span></span><br><span class="line"><span class="comment">//3. 因为图片路径是从服务端获取的，加载需要时间，需要等待图片加载完成后才能使用瀑布流进行布局。</span></span><br><span class="line"><span class="comment">//4. 给window注册scroll事件，当触底时，需要动态的加载图片。</span></span><br><span class="line"><span class="comment">//5. 加载时，显示加载中的提示信息，并且要求不能重复发送ajax请求</span></span><br><span class="line"><span class="comment">//6. 当服务端返回图片数量为0时，提示用户没有更多数据。</span></span><br></pre></td></tr></table></figure>



<p>接口文档</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//接口说明：瀑布流分页数据</span></span><br><span class="line"><span class="comment">//接口地址：data.php</span></span><br><span class="line"><span class="comment">//请求方式：get</span></span><br><span class="line"><span class="comment">//接口参数：page 当前是第几页    pageSize 当前页需要显示多少条</span></span><br><span class="line"><span class="comment">//返回类型  json</span></span><br><span class="line"><span class="comment">//返回数据：</span></span><br><span class="line">&#123;</span><br><span class="line">  page: <span class="number">2</span>,</span><br><span class="line">  items:[</span><br><span class="line">    &#123;<span class="attr">path</span>: <span class="string">"./images/1.jpg"</span>,<span class="attr">text</span>:<span class="string">'这是描述信息'</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">path</span>: <span class="string">"./images/2.jpg"</span>,<span class="attr">text</span>:<span class="string">'这是描述信息'</span>&#125;</span><br><span class="line">    &#123;<span class="attr">path</span>: <span class="string">"./images/2.jpg"</span>,<span class="attr">text</span>:<span class="string">'这是描述信息'</span>&#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br><span class="line">	<span class="comment">//page   下一页的页码</span></span><br><span class="line">	<span class="comment">//items  返回当前页的数据</span></span><br><span class="line">		<span class="comment">//path 图片地址</span></span><br><span class="line">		<span class="comment">//text 文字</span></span><br></pre></td></tr></table></figure>



<h1 id="同源与跨域"><a href="#同源与跨域" class="headerlink" title="同源与跨域"></a>同源与跨域</h1><h2 id="同源"><a href="#同源" class="headerlink" title="同源"></a>同源</h2><h3 id="同源策略的基本概念"><a href="#同源策略的基本概念" class="headerlink" title="同源策略的基本概念"></a>同源策略的基本概念</h3><blockquote>
<p>1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。<br>同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页”同源”。所谓”同源”指的是”三个相同”。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">协议相同</span><br><span class="line">域名相同</span><br><span class="line">端口相同</span><br></pre></td></tr></table></figure>

<p>举例来说，这个网址<code>http://www.example.com/dir/page.html</code>协议是<code>http://</code>，</p>
<p>域名是<code>www.example.com</code>，端口是<code>80</code>（默认端口可以省略）。它的同源情况如下。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">http:<span class="comment">//www.example.com/dir2/other.html：同源</span></span><br><span class="line"></span><br><span class="line">file:<span class="comment">///F:/phpStudy/WWW/day01/04-demo/04.html 不同源(协议不同)</span></span><br><span class="line">http:<span class="comment">//v2.www.example.com/dir/other.html：不同源（域名不同）</span></span><br><span class="line">http:<span class="comment">//www.example.com:81/dir/other.html：不同源（端口不同）</span></span><br></pre></td></tr></table></figure>

<h3 id="同源策略的目的"><a href="#同源策略的目的" class="headerlink" title="同源策略的目的"></a>同源策略的目的</h3><blockquote>
<p>同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。</p>
</blockquote>
<h3 id="同源策略的限制范围"><a href="#同源策略的限制范围" class="headerlink" title="同源策略的限制范围"></a>同源策略的限制范围</h3><blockquote>
<p>随着互联网的发展，“同源策略”越来越严格，目前，如果非同源，以下三种行为都将收到限制。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> Cookie、LocalStorage 和 IndexDB 无法读取。</span><br><span class="line"><span class="number">2.</span> DOM 无法获得。</span><br><span class="line"><span class="number">3.</span> AJAX 请求不能发送。</span><br></pre></td></tr></table></figure>

<p>虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到<strong>跨域</strong> 。</p>
<h2 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h2><p>【演示跨域问题.html】</p>
<h3 id="jsonp-无兼容性问题"><a href="#jsonp-无兼容性问题" class="headerlink" title="jsonp( 无兼容性问题 )"></a>jsonp( 无兼容性问题 )</h3><blockquote>
<p>JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。</p>
<p>原理：服务端返回一个定义好的js函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合</p>
</blockquote>
<p><code>script</code> 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件。类似的还有<code>img</code>和<code>link</code>标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--不受同源策略限制的标签--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"http://www.api.com/1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"http://www.api.com/1.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://www.api.com/1.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h4 id="jsonp演化过程1"><a href="#jsonp演化过程1" class="headerlink" title="jsonp演化过程1"></a>jsonp演化过程1</h4><p>php文件</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">header(<span class="string">"content-type:text/html;charset=utf-8"</span>);</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"alert(1111)"</span>;</span><br></pre></td></tr></table></figure>

<p>html文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://www.api.com/testjs.php"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>原理：其实src的路径是什么文件不重要，无论引入js文件还是php文件，最后返回给浏览器的都是字符串，因此我们script标签是可以引入一个php文件的。</p>
<h4 id="jsonp演化过程2"><a href="#jsonp演化过程2" class="headerlink" title="jsonp演化过程2"></a>jsonp演化过程2</h4><p>php文件</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">header(<span class="string">"content-type:text/html;charset=utf-8"</span>);</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"var a = 118;"</span>;</span><br></pre></td></tr></table></figure>

<p>html文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://www.api.com/testjs.php"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="comment">//a打印出来了118</span></span></span><br><span class="line"><span class="javascript">  <span class="built_in">console</span>.log(a);</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>我们现在做到了一件事情，从不同源的php文件中获取到了数据</strong> </p>
<p>缺点：获取数据的script标签必须写在使用的script标签的前面，必须保证先有数据才能对数据进行渲染。</p>
<h4 id="jsonp演化过程3"><a href="#jsonp演化过程3" class="headerlink" title="jsonp演化过程3"></a>jsonp演化过程3</h4><p>php代码</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">header(<span class="string">"content-type:text/html;charset=utf-8"</span>);</span><br><span class="line">$arr = <span class="keyword">array</span>(</span><br><span class="line">    <span class="string">"name"</span>=&gt;<span class="string">"zs"</span>,</span><br><span class="line">    <span class="string">"age"</span>=&gt;<span class="number">18</span></span><br><span class="line">);</span><br><span class="line">$result = json_encode($arr);</span><br><span class="line"><span class="comment">//这是一段js函数的调用的代码，$result就是我们想要的数据</span></span><br><span class="line"><span class="keyword">echo</span> <span class="string">"func($result)"</span>;</span><br></pre></td></tr></table></figure>

<p>js代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="function"><span class="keyword">function</span> <span class="title">func</span><span class="params">(data)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(data);</span></span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://www.api.com/testjs.php"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p>缺点：后端必须知道前端声明的方法的名字，后端才能调用。</p>
<h4 id="jsonp演化过程4"><a href="#jsonp演化过程4" class="headerlink" title="jsonp演化过程4"></a>jsonp演化过程4</h4><p>php代码</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">header(<span class="string">"content-type:text/html;charset=utf-8"</span>);</span><br><span class="line">$arr = <span class="keyword">array</span>(</span><br><span class="line">    <span class="string">"name"</span>=&gt;<span class="string">"zs"</span>,</span><br><span class="line">    <span class="string">"age"</span>=&gt;<span class="number">18</span></span><br><span class="line">);</span><br><span class="line">$result = json_encode($arr);</span><br><span class="line"><span class="comment">//这是一段js函数的调用的代码，$result就是我们想要的数据</span></span><br><span class="line"><span class="keyword">echo</span> $_GET[<span class="string">'callback'</span>].<span class="string">"($result)"</span>;</span><br></pre></td></tr></table></figure>

<p>javascript代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params">data</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> button = <span class="built_in">document</span>.querySelector(<span class="string">"button"</span>);</span><br><span class="line">button.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> script = <span class="built_in">document</span>.createElement(<span class="string">"script"</span>);</span><br><span class="line">  script.src = <span class="string">"http://www.api.com/testjs.php?callback=fun"</span>;</span><br><span class="line">  <span class="built_in">document</span>.body.appendChild(script);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<ol>
<li>说白了，jsonp的原理就是 借助了script标签 src 请求资源时, 不受同源策略的限制.</li>
<li>在服务端返回一个函数的调用，将数据当前调用函数的实参。</li>
<li>在浏览器端，需要程序要声明一个全局函数，通过形参就可以获取到服务端返回的对应的值</li>
</ol>
<p>jsonp原理大家需要知道，但不用太过于去纠结这个原理，因为jquery已经帮我们封装好了，我们使用起来非常的方便。</p>
<h3 id="jquery对于jsonp的封装"><a href="#jquery对于jsonp的封装" class="headerlink" title="jquery对于jsonp的封装"></a>jquery对于jsonp的封装</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用起来相当的简单，跟普通的get请求没有任何的区别，只需要把dataType固定成jsonp即可。</span></span><br><span class="line">$.ajax(&#123;</span><br><span class="line">  type:<span class="string">"get"</span>,</span><br><span class="line">  url:<span class="string">"http://www.Jepson.com/testjs.php"</span>,</span><br><span class="line">  dataType:<span class="string">"jsonp"</span>,</span><br><span class="line">  data:&#123;</span><br><span class="line">    uname:<span class="string">"Jepson"</span>,</span><br><span class="line">    upass:<span class="string">"123456"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  success:<span class="function"><span class="keyword">function</span> (<span class="params">info</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(info);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>【案例：查询天气.html】</p>
<p><a href="https://www.jisuapi.com/api/weather/" target="_blank" rel="noopener">天气查询api地址</a></p>
<p>【案例：省市区三级联动.html】</p>
<p><a href="https://www.jisuapi.com/api/area/" target="_blank" rel="noopener">api地址</a> </p>
<h1 id="XMLHttpRequest2-0"><a href="#XMLHttpRequest2-0" class="headerlink" title="XMLHttpRequest2.0"></a>XMLHttpRequest2.0</h1><blockquote>
<p>XMLHttpRequest是一个javascript内置对象，使得Javascript可以进行异步的HTTP通信。2008年2月，就提出了XMLHttpRequest Level 2 草案。</p>
</blockquote>
<p>老版本的XMLHttpRequest的缺点：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 仅支持传输文本数据，无法传说二进制文件，比如图片视频等。</span><br><span class="line"><span class="number">2.</span> 传输数据时，没有进度信息，只能提示完成与否。</span><br><span class="line"><span class="number">3.</span> 受到了<span class="string">"同源策略"</span>的限制</span><br></pre></td></tr></table></figure>



<p>新版本的功能：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 可以设置timeout超时时间</span><br><span class="line"><span class="number">2.</span> 可以使用formData对象管理表单数据</span><br><span class="line"><span class="number">3.</span> 允许请求不同域名下的数据（跨域）</span><br><span class="line"><span class="number">4.</span> 支持上传二进制文件</span><br><span class="line"><span class="number">5.</span> 可以获取数据传输的进度信息</span><br></pre></td></tr></table></figure>

<p><strong>注意：我们现在使用new XMLHttpRequest创建的对象就是2.0对象了，我们之前学的是1.0的语法，现在学习一些2.0的新特性即可。</strong>  </p>
<h2 id="timeout设置超时"><a href="#timeout设置超时" class="headerlink" title="timeout设置超时"></a>timeout设置超时</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">xhr.timeout = <span class="number">3000</span>;<span class="comment">//设置超时时间</span></span><br><span class="line">xhr.ontimeout = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  alert(<span class="string">"请求超时"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="formData管理表单数据"><a href="#formData管理表单数据" class="headerlink" title="formData管理表单数据"></a>formData管理表单数据</h2><blockquote>
<p>formData对象类似于jquery的serialize方法，用于管理表单数据</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">使用特点： </span><br><span class="line"><span class="number">1.</span> 实例化一个formData对象， <span class="keyword">new</span> formData(form); form就是表单元素</span><br><span class="line"><span class="number">2.</span> formData对象可以直接作为 xhr.send(formData)的参数。注意此时数据是以二进制的形式进行传输。</span><br><span class="line"><span class="number">3.</span> formData有一个append方法，可以添加参数。formData.append(<span class="string">"id"</span>, <span class="string">"1111"</span>);</span><br><span class="line"><span class="number">4.</span> 这种方式只能以post形式传递，不需要设置请求头，浏览器会自动为我们设置一个合适的请求头。</span><br></pre></td></tr></table></figure>



<p>代码示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 使用formData必须发送post请求</span></span><br><span class="line">    xhr.open(<span class="string">"post"</span>, <span class="string">"02-formData.php"</span>);</span><br><span class="line">    </span><br><span class="line"><span class="comment">//2. 获取表单元素</span></span><br><span class="line"><span class="keyword">var</span> form = <span class="built_in">document</span>.querySelector(<span class="string">"#myForm"</span>);</span><br><span class="line"><span class="comment">//3. 创建form对象，可以直接作为send的参数。</span></span><br><span class="line"><span class="keyword">var</span> formData = <span class="keyword">new</span> FormData(form);</span><br><span class="line"></span><br><span class="line"><span class="comment">//4. formData可以使用append方法添加参数</span></span><br><span class="line">formData.append(<span class="string">"id"</span>, <span class="string">"1111"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//5. 发送，不需要指定请求头，浏览器会自动选择合适的请求头</span></span><br><span class="line">xhr.send(formData);</span><br></pre></td></tr></table></figure>



<h2 id="文件上传"><a href="#文件上传" class="headerlink" title="文件上传"></a>文件上传</h2><blockquote>
<p>以前，文件上传需要借助表单进行上传，但是表单上传是同步的，也就是说文件上传时，页面需要提交和刷新，用户体验不友好，xhr2.0中的formData对象支持文件的异步上传。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> formData = <span class="keyword">new</span> FormData();</span><br><span class="line"><span class="comment">//获取上传的文件，传递到后端</span></span><br><span class="line"><span class="keyword">var</span> file = <span class="built_in">document</span>.getElementById(<span class="string">"file"</span>).files[<span class="number">0</span>];</span><br><span class="line">formData.append(<span class="string">"file"</span>, file);</span><br><span class="line">xhr.send(formData);</span><br></pre></td></tr></table></figure>



<h2 id="显示文件进度信息"><a href="#显示文件进度信息" class="headerlink" title="显示文件进度信息"></a>显示文件进度信息</h2><blockquote>
<p>xhr2.0还支持获取上传文件的进度信息，因此我们可以根据进度信息可以实时的显示文件的上传进度。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 需要注册 xhr.upload.onprogress = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;&#125; 事件，用于监听文件上传的进度.注意：需要在send之前注册。</span><br><span class="line"><span class="number">2.</span> 上传的进度信息会存储事件对象e中</span><br><span class="line"><span class="number">3.</span> e.loaded表示已上传的大小   e.total表示整个文件的大小</span><br></pre></td></tr></table></figure>



<p>代码参考：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">xhr.upload.onprogress = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">  </span><br><span class="line">  inner.style.width = (e.loaded/e.total*<span class="number">100</span>).toFixed(<span class="number">2</span>)+<span class="string">"%"</span>;</span><br><span class="line">  span.innerHTML = (e.loaded/e.total*<span class="number">100</span>).toFixed(<span class="number">2</span>)+<span class="string">"%"</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">xhr.send(formData);</span><br></pre></td></tr></table></figure>

<p>如果上传文件超过8M，php会报错，需要进行设置，允许php上传大文件。</p>
<h2 id="跨域资源共享-CORS-兼容性IE10"><a href="#跨域资源共享-CORS-兼容性IE10" class="headerlink" title="跨域资源共享(CORS) ( 兼容性IE10+ )"></a>跨域资源共享(CORS) ( 兼容性IE10+ )</h2><h3 id="cors的使用"><a href="#cors的使用" class="headerlink" title="cors的使用"></a>cors的使用</h3><blockquote>
<p>新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求。这叫做<a href="http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing" target="_blank" rel="noopener">“跨域资源共享”</a>（Cross-origin resource sharing，简称CORS）。</p>
</blockquote>
<p>跨域资源共享（CORS）的前提</p>
<ul>
<li>浏览器支持这个功能( 兼容性IE10+ )</li>
<li>服务器必须允许这种跨域。</li>
</ul>
<p>服务器允许跨域的代码：</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//允许所有的域名访问这个接口</span></span><br><span class="line">header(<span class="string">"Access-Control-Allow-Origin:*"</span>);</span><br><span class="line"><span class="comment">//允许www.study.com这个域名访问这个接口</span></span><br><span class="line">header(<span class="string">"Access-Control-Allow-Origin:http://www.study.com"</span>);</span><br></pre></td></tr></table></figure>



<h3 id="CORS的具体流程（了解）"><a href="#CORS的具体流程（了解）" class="headerlink" title="CORS的具体流程（了解）"></a>CORS的具体流程（了解）</h3><ol>
<li><p>浏览器发送跨域请求</p>
</li>
<li><p>服务器端收到一个跨域请求后，在响应头中添加Access-Control-Allow-Origin Header资源权限配置。发送响应</p>
</li>
<li><p>浏览器收到响应后，查看是否设置了<code>header(&#39;Access-Control-Allow-Origin:请求源域名或者*&#39;);</code></p>
<p>如果当前域已经得到授权，则将结果返回给<a href="http://lib.csdn.net/base/javascript" target="_blank" rel="noopener">JavaScript</a>。否则浏览器忽略此次响应。</p>
</li>
</ol>
<p>结论：</p>
<ol>
<li><strong>跨域行为是浏览器行为，响应式回来了的, 只是浏览器安全机制做了限制,  对于跨域响应内容进行了忽略。</strong></li>
<li><strong>服务器与服务器之间是不存在跨域的问题的</strong></li>
</ol>
<h3 id="jsonp与cors的对比"><a href="#jsonp与cors的对比" class="headerlink" title="jsonp与cors的对比"></a>jsonp与cors的对比</h3><ul>
<li>jsonp兼容性好，老版本浏览器也支持，但是jsonp仅支持get请求，发送的数据量有限。使用麻烦</li>
<li>cors需要浏览器支持cors功能才行。但是使用简单，<strong>只要服务端设置允许跨域，对于客户端来说，跟普通的get、post请求并没有什么区别。</strong></li>
<li>跨域的安全性问题：<strong>因为跨域是需要服务端配合控制的</strong> ，也就是说不论jsonp还是cors，如果没有服务端的允许，浏览器是没法做到跨域的。</li>
</ul>
<p>【案例：图灵机器人】</p>
<h3 id="其他的跨域手段"><a href="#其他的跨域手段" class="headerlink" title="其他的跨域手段"></a>其他的跨域手段</h3><p>以下方式基本不用啊，了解即可：</p>
<p>1、顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）<br>2、document.domain + iframe<br>3、window.name + iframe<br>4、location.hash + iframe<br>5、window.postMessage()</p>
<p><a href="http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html" target="_blank" rel="noopener">其他跨域方式</a></p>

      
      
    </div>
    
    <div class="article-info article-info-index">
      
      

      
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
  
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                &copy; 2020 程序猿
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="http://bestwing.me" target="_blank">Sw'blog</a> by Swing
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
                        <span id="site-visit" >海贼到访数: 
                            <span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>, </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
                        <span id="page-visit">本页阅读量: 
                            <span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>

    </div>
    
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>


<script src="/js/main.js"></script>


    <script>
        $(document).ready(function() {
            var backgroundnum = 24;
            var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
            $("#mobile-nav").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
            $(".left-col").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
        })
    </script>





<div class="scroll" id="scroll">
    <a href="#"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments"><i class="fa fa-comments-o"></i></a>
    <a href="#footer"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
    $(document).ready(function() {
        if ($("#comments").length < 1) {
            $("#scroll > a:nth-child(2)").hide();
        };
    })
</script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

  <script language="javascript">
    $(function() {
        $("a[title]").each(function() {
            var a = $(this);
            var title = a.attr('title');
            if (title == undefined || title == "") return;
            a.data('title', title).removeAttr('title').hover(

            function() {
                var offset = a.offset();
                $("<div id=\"anchortitlecontainer\"></div>").appendTo($("body")).html(title).css({
                    top: offset.top - a.outerHeight() - 15,
                    left: offset.left + a.outerWidth()/2 + 1
                }).fadeIn(function() {
                    var pop = $(this);
                    setTimeout(function() {
                        pop.remove();
                    }, pop.text().length * 800);
                });
            }, function() {
                $("#anchortitlecontainer").remove();
            });
        });
    });
</script>


    <script type="text/javascript">
      window.onload = function(){
        document.getElementById("search").onclick = function(){
            console.log("search")
            search();
        }
      }
      function search(){
        (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
        (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
        e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
        })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

        _st('install','A1Pz-LKMXbrzcFg2FWi6','2.0.0');
      }
    </script>

  </div>
</body>
</html>